/* Local serif family.
   Place your own Wagon font files in /assets/fonts/. */
@font-face{
  font-family:"Wagon Local";
  src:url("../fonts/Wagon-ExtraLight.otf") format("opentype");
  font-style:normal;
  font-weight:200;
  font-display:swap;
}
@font-face{
  font-family:"Wagon Local";
  src:url("../fonts/Wagon-ExtraLightItalic.otf") format("opentype");
  font-style:italic;
  font-weight:200;
  font-display:swap;
}


:root{
  --ink:#15130f;--muted:#746f67;--hair:#dcd5c8;--paper:#f4f0e7;
  --pad:clamp(18px,2.6vw,52px);--gap-x:clamp(28px,4vw,76px);--gap-y:clamp(76px,9vw,165px);
  --columns:3;
}
*{box-sizing:border-box}
html{min-height:100%;background:#f4f0e7;scroll-behavior:smooth;overflow-x:hidden;overflow-y:auto}
body{min-height:100%;margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-y:auto}
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");mix-blend-mode:multiply}
body.lb-open,body.archive-open{overflow:hidden}
.site{width:100%;min-height:100vh;overflow:visible}

/* INTRO FILM */
.intro-film{height:68vh;min-height:520px;position:relative;margin:var(--pad);overflow:hidden;background:#f3f1eb}
.intro-film video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(.98)}
.intro-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05) 35%,rgba(255,255,255,.74) 100%);pointer-events:none}
.intro-top{position:absolute;z-index:2;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start}
.logo{width:min(210px,22vw);height:auto;display:block}
.mode-chip{text-align:right;font-size:9px;line-height:1.55;letter-spacing:.15em;text-transform:uppercase}
.mode-chip span{color:#777}
.intro-copy{position:absolute;z-index:2;left:24px;bottom:28px;max-width:min(680px,72vw)}
.intro-copy h1{margin:0;font-size:clamp(30px,4vw,68px);line-height:.98;letter-spacing:-.055em;font-weight:500;max-width:14ch}
.intro-copy p{margin:18px 0 0;max-width:43ch;font-size:12px;line-height:1.55;color:#4f4f4f}
.scroll-note{position:absolute;z-index:2;right:24px;bottom:28px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#666}

/* ARTWORK OF THE DAY */
.featured{padding:clamp(22px,3.4vw,62px) var(--pad) clamp(105px,12vw,190px)}
.eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:14px}
.featured-media{height:min(84vh,1000px);width:100%;background:#f8f8f6;display:grid;place-items:center;overflow:hidden;cursor:none}
.featured-media img,.featured-media video{width:100%;height:100%;object-fit:contain;display:block}
.featured-info{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap-x);padding-top:15px}
.featured-title{grid-column:1/span 4;font-size:12px;line-height:1.5}
.featured-title .no{display:inline-block;color:#888;margin-right:8px}
.featured-copy{grid-column:7/span 3;font-size:12px;line-height:1.5;color:#707070;max-width:42ch}
.featured-quote{grid-column:11/span 2;margin:0;font-size:12px;line-height:1.5;font-style:italic}

/* EXHIBITION MODES */
.mode-quiet{--columns:2;--gap-x:clamp(54px,7vw,130px);--gap-y:clamp(110px,13vw,235px)}
.mode-dense{--columns:3;--gap-x:clamp(24px,3vw,54px);--gap-y:clamp(48px,6vw,100px)}
.mode-monumental{--columns:2;--gap-x:clamp(34px,4.5vw,88px);--gap-y:clamp(78px,10vw,175px)}
.exhibition{padding:0 var(--pad);column-count:var(--columns);column-gap:var(--gap-x)}
.work{display:inline-block;width:100%;vertical-align:top;break-inside:avoid;margin:0 0 var(--gap-y);opacity:0;transform:translateY(22px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.work.reveal{opacity:1;transform:none}
.work.w68{width:68%}.work.w70{width:70%}.work.w72{width:72%}.work.w74{width:74%}.work.w76{width:76%}.work.w78{width:78%}.work.w80{width:80%}.work.w82{width:82%}.work.w84{width:84%}.work.w86{width:86%}.work.w88{width:88%}.work.w92{width:92%}.work.w94{width:94%}.work.w100{width:100%}
.work.left{margin-left:0;margin-right:auto}.work.center{margin-left:auto;margin-right:auto}.work.right{margin-left:auto;margin-right:0}
.work.feature{column-span:all;display:block;width:100%;margin-left:0;margin-right:0}
.work.feature .media{height:min(86vh,1040px)}
.work.feature .media img,.work.feature .media video{height:100%;object-fit:contain}
.work.feature .caption{max-width:560px}
.mode-monumental .work.feature .media{height:min(92vh,1180px)}
.media{position:relative;overflow:hidden;background:#f8f8f6;cursor:none}
.media img,.media video{display:block;width:100%;height:auto;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.work:hover .media img{transform:scale(1.018)}
.media-mark{position:absolute;left:11px;bottom:11px;background:#fff;padding:7px 9px;border:1px solid rgba(0,0,0,.09);font-size:9px;letter-spacing:.13em}
.caption{margin-top:13px;max-width:42ch}.caption-line{font-size:11px;line-height:1.45}.caption-line .no{color:#999;margin-right:7px}.caption-line .age{color:#888;margin-left:6px}
.caption p{margin:5px 0 0;font-size:11px;line-height:1.55;color:#777}.caption blockquote{margin:10px 0 0;font-size:11px;line-height:1.5;font-style:italic}

/* CUSTOM CURSOR */
.cursor{position:fixed;z-index:100;pointer-events:none;left:0;top:0;width:62px;height:62px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:8px;letter-spacing:.15em;text-transform:uppercase;opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity .18s ease,transform .18s ease}
.cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.986);display:none;grid-template-columns:minmax(0,1fr) clamp(205px,16vw,270px);gap:clamp(22px,2.5vw,42px);padding:clamp(20px,2.5vw,48px);overflow:hidden}
.lightbox.open{display:grid}.lb-media{display:grid;place-items:center;min-width:0;opacity:1;transform:translateX(0);transition:opacity .2s ease,transform .25s ease}
.lb-media.switch-next{opacity:0;transform:translateX(-18px)}.lb-media.switch-prev{opacity:0;transform:translateX(18px)}
.lb-media img,.lb-media video{display:block;max-width:100%;max-height:calc(100vh - 2 * clamp(20px,2.5vw,48px));width:auto;height:auto;object-fit:contain}
.lb-copy{align-self:end;width:100%;max-width:270px;padding-bottom:4px}.lb-count{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-bottom:28px}
.lb-title{font-size:clamp(18px,1.6vw,27px);line-height:1.08;letter-spacing:-.035em;margin:0 0 10px;font-weight:500}
.lb-meta,.lb-text,.lb-quote{font-size:11px;line-height:1.55}.lb-meta{color:#888;margin-bottom:18px}.lb-text{margin:0 0 16px}.lb-quote{font-style:italic;margin:0}
.lb-close{position:absolute;top:18px;right:var(--pad);border:0;background:transparent;font:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.lb-nav{position:absolute;left:var(--pad);bottom:18px;display:flex;gap:20px}.lb-nav button{border:0;background:transparent;font:inherit;font-size:9px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;padding:8px 0}

/* ARCHIVE */
.end{padding:clamp(80px,10vw,160px) var(--pad) var(--pad)}
.end-line{border-top:1px solid var(--hair);padding-top:18px;display:flex;justify-content:space-between;align-items:center}
.end-line button{border:0;background:none;padding:0;font:inherit;font-size:11px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
.end-line span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#888}
.archive{position:fixed;inset:0;z-index:95;background:#fff;display:none;overflow:auto;padding:var(--pad)}.archive.open{display:block}
.archive-head{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.96);display:flex;justify-content:space-between;align-items:center;padding:0 0 20px;margin-bottom:34px;border-bottom:1px solid var(--hair)}
.archive-head h2{font-size:13px;margin:0;font-weight:500}.archive-head button{border:0;background:none;font:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.archive-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(22px,3vw,48px) clamp(18px,2.2vw,38px)}
.archive-item{cursor:pointer}.archive-thumb{aspect-ratio:4/5;background:#f8f8f6;display:grid;place-items:center;overflow:hidden}.archive-thumb img,.archive-thumb video{width:100%;height:100%;object-fit:contain;display:block}
.archive-cap{padding-top:9px;font-size:10px;line-height:1.45}.archive-cap span{color:#888}

@media(max-width:1200px){.mode-dense{--columns:2}.archive-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){
  :root{--pad:18px;--gap-x:18px;--gap-y:74px}.intro-film{height:64vh;min-height:500px;margin:18px}.intro-top{top:18px;left:18px;right:18px}.logo{width:min(180px,48vw)}
  .intro-copy{left:18px;bottom:22px;max-width:78vw}.intro-copy h1{font-size:clamp(34px,10vw,54px)}.scroll-note{display:none}.mode-chip{font-size:8px}
  .featured{padding-top:30px}.featured-media{height:72vh}.featured-info{display:block}.featured-copy,.featured-quote{margin-top:9px}.featured-quote{max-width:30ch}
  .mode-quiet,.mode-dense,.mode-monumental{--columns:1;--gap-x:18px;--gap-y:76px}.work,.work.w68,.work.w70,.work.w72,.work.w74,.work.w76,.work.w78,.work.w80,.work.w82,.work.w84,.work.w86,.work.w88,.work.w92,.work.w94,.work.w100,.work.feature{width:100%}.work.feature .media,.mode-monumental .work.feature .media{height:auto}.work.feature .media img,.work.feature .media video,.mode-monumental .work.feature .media img,.mode-monumental .work.feature .media video{height:auto}
  .cursor{display:none}.media,.featured-media{cursor:zoom-in}.lightbox{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:auto}.lb-media img,.lb-media video{max-height:67vh}.lb-copy{padding:6px 0 50px;max-width:300px}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(hover:none){.cursor{display:none}.media,.featured-media{cursor:zoom-in}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.work{opacity:1;transform:none}}

/* ---------------------------------------------------------
   STUDIO SURFACE
   Museum-clean structure + paper, graphite and paint residue.
   The marks are intentionally irregular and change on reload.
--------------------------------------------------------- */
.site{position:relative;background:
  radial-gradient(circle at 14% 6%,rgba(255,255,255,.62),transparent 25%),
  radial-gradient(circle at 88% 58%,rgba(150,118,82,.035),transparent 28%),
  linear-gradient(180deg,#f7f3eb 0%,#f2ede3 100%)}
.site>section,.site>main{position:relative;z-index:1}

body::before{
  content:"";position:fixed;inset:0;z-index:69;pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 22%,rgba(91,75,58,.045) 0 1%,transparent 19%),
    radial-gradient(ellipse at 93% 38%,rgba(160,92,57,.035) 0 1%,transparent 16%),
    radial-gradient(ellipse at 24% 84%,rgba(84,91,74,.03) 0 1%,transparent 18%),
    linear-gradient(93deg,transparent 0 12%,rgba(72,62,51,.018) 12.2%,transparent 12.55% 100%);
  mix-blend-mode:multiply
}
body::after{
  opacity:.052;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.76'/%3E%3C/svg%3E");
  mix-blend-mode:multiply
}

.surface-layer{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mix-blend-mode:multiply
}
.surface-mark{position:absolute;display:block;pointer-events:none;transform-origin:center}
.surface-mark.paint{
  background:var(--mark);
  border-radius:61% 39% 57% 43% / 43% 54% 46% 57%;
  filter:blur(.35px);
  opacity:var(--op,.08);
  clip-path:polygon(2% 39%,8% 23%,21% 18%,34% 8%,51% 15%,67% 7%,82% 19%,98% 31%,93% 49%,100% 66%,82% 75%,69% 91%,50% 82%,33% 94%,18% 81%,5% 68%)
}
.surface-mark.paint::after{
  content:"";position:absolute;inset:18% -8% -15% 12%;background:inherit;
  opacity:.32;filter:blur(7px);border-radius:inherit;transform:translate(8px,4px)
}
.surface-mark.pencil{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(52,47,41,.08) 8%,rgba(52,47,41,.24) 45%,rgba(52,47,41,.10) 86%,transparent 100%);
  box-shadow:0 2px 0 rgba(52,47,41,.035),0 -2px 0 rgba(52,47,41,.025);
  opacity:var(--op,.7)
}
.surface-mark.speck{
  background-image:
    radial-gradient(circle at 12% 25%,rgba(55,49,42,.32) 0 1px,transparent 1.6px),
    radial-gradient(circle at 65% 54%,rgba(55,49,42,.20) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 84% 18%,rgba(130,78,48,.22) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 35% 80%,rgba(55,49,42,.16) 0 1px,transparent 1.5px);
  background-size:19px 17px,23px 21px,27px 26px,15px 14px;
  opacity:var(--op,.22);filter:blur(.12px)
}
.surface-mark.wash{
  border:1px solid var(--mark);
  border-radius:50%;
  opacity:var(--op,.07);
  filter:blur(1.6px);
  box-shadow:inset 0 0 28px var(--mark),0 0 18px var(--mark)
}

/* Surface density follows the exhibition mode. */
.mode-quiet .surface-layer{opacity:.62}
.mode-dense .surface-layer{opacity:1}
.mode-monumental .surface-layer{opacity:.82}

/* A couple of local, imperfect studio gestures. */
.featured{position:relative}
.featured::before{
  content:"";position:absolute;left:-3.5vw;top:7vw;width:24vw;height:4.2vw;
  min-width:210px;min-height:34px;background:rgba(125,82,55,.052);
  clip-path:polygon(0 43%,9% 22%,24% 30%,38% 9%,56% 28%,73% 13%,100% 36%,95% 63%,75% 78%,58% 64%,39% 89%,18% 69%,4% 77%);
  transform:rotate(-4.5deg);filter:blur(.35px);pointer-events:none;mix-blend-mode:multiply
}
.end::before{
  content:"";position:absolute;right:5vw;top:28%;width:170px;height:58px;
  background:rgba(65,62,55,.032);border-radius:49% 51% 43% 57%;
  transform:rotate(8deg);filter:blur(8px);pointer-events:none
}

/* The artworks feel like physical sheets rather than flat UI cards. */
.work{position:relative;--tilt:0deg}
.work:nth-child(7n+2){--tilt:-.16deg}
.work:nth-child(9n+4){--tilt:.13deg}
.work:nth-child(11n+6){--tilt:-.09deg}
.media,.featured-media,.archive-thumb{
  border:1px solid rgba(63,53,43,.045);
  box-shadow:0 1px 0 rgba(255,255,255,.78),0 7px 25px rgba(61,49,38,.045)
}
.media{
  transform:rotate(var(--tilt));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease
}
.work:hover .media{
  transform:translateY(-2px) rotate(var(--tilt));
  box-shadow:0 1px 0 rgba(255,255,255,.84),0 12px 32px rgba(61,49,38,.065)
}
.work:hover .media img{
  transform:scale(1.006);
  filter:contrast(1.025) saturate(.97)
}

/* The intro film is still cinematic, but no longer clinically digital. */
.intro-film{
  box-shadow:0 12px 40px rgba(59,48,36,.055);
  border:1px solid rgba(64,53,42,.04)
}
.intro-film::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 14% 18%,rgba(129,82,53,.055),transparent 19%),
    radial-gradient(ellipse at 82% 78%,rgba(75,72,61,.042),transparent 18%);
  mix-blend-mode:multiply
}
.intro-film::after{z-index:1}
.intro-top,.intro-copy,.scroll-note{z-index:3}

/* Archive/detail stay calmer, but inherit the warm paper stock. */
.lightbox,.archive{background:#f6f2e9}
.archive-head{background:rgba(246,242,233,.965)}


/* ---------------------------------------------------------
   TYPOGRAPHY SYSTEM
   Display serif + clean sans + archive mono.
--------------------------------------------------------- */
:root{
  --font-serif:"Cormorant Garamond","Times New Roman",serif;
  --font-sans:"Inter",Arial,Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular","Menlo","Consolas",monospace;
}

body{
  font-family:var(--font-sans);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  letter-spacing:-.003em;
}

/* System labels / utility typography */
.mode-chip,
.mode-chip span,
.scroll-note,
.eyebrow,
.media-mark,
.lb-count,
.lb-close,
.lb-nav button,
.end-line button,
.end-line span,
.archive-head button{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mode-chip{font-size:9px;line-height:1.6}
.mode-chip span,
.eyebrow,
.scroll-note,
.lb-count,
.end-line span{color:#8d867d}
.media-mark{font-size:8.5px;letter-spacing:.13em}
.end-line button{font-size:10px}
.archive-head button,.lb-close,.lb-nav button{font-size:9px}

/* Intro / cover */
.intro-copy h1{
  font-family:var(--font-serif);
  font-size:clamp(44px,5vw,86px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:500;
  max-width:13ch;
  text-wrap:balance;
}
.intro-copy p{
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.66;
  letter-spacing:-.004em;
  color:#595248;
  max-width:46ch;
}
.mode-quiet .intro-copy h1{font-size:clamp(42px,4.7vw,78px)}
.mode-dense .intro-copy h1{font-size:clamp(38px,4.2vw,68px)}
.mode-monumental .intro-copy h1{font-size:clamp(48px,5.3vw,94px)}
.mode-quiet .intro-copy p{max-width:40ch}
.mode-dense .intro-copy p{font-size:12px;line-height:1.58}
.mode-monumental .intro-copy p{font-size:13px;line-height:1.72;max-width:44ch}

/* Featured work */
.featured-title{
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.45;
}
.featured-title .no{
  display:block;
  margin:0 0 9px;
  color:#9a938a;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.featured-title strong{
  display:block;
  font-family:var(--font-serif);
  font-size:clamp(24px,2.1vw,38px);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:500;
  margin-bottom:4px;
}
.featured-copy{
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.68;
  letter-spacing:-.004em;
  color:#615a51;
}
.featured-quote{
  font-family:var(--font-serif);
  font-size:clamp(16px,1.25vw,22px);
  line-height:1.36;
  font-style:italic;
  letter-spacing:-.01em;
  color:#26211d;
}
.mode-quiet .featured-title strong{font-size:clamp(23px,1.95vw,34px)}
.mode-dense .featured-title strong{font-size:clamp(21px,1.7vw,29px)}
.mode-monumental .featured-title strong{font-size:clamp(28px,2.35vw,42px)}

/* Grid captions */
.caption{
  margin-top:14px;
  max-width:44ch;
}
.caption-line{
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.4;
}
.caption-line .no{
  color:#9d958b;
  margin-right:10px;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.caption-line strong{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.35vw,24px);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:500;
  margin-right:4px;
}
.caption-line .age{
  color:#9a9288;
  margin-left:8px;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.caption p{
  margin:7px 0 0;
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.62;
  letter-spacing:-.004em;
  color:#625c53;
  max-width:36ch;
}
.caption blockquote{
  margin:10px 0 0;
  font-family:var(--font-serif);
  font-size:14px;
  line-height:1.45;
  letter-spacing:-.01em;
  font-style:italic;
  color:#25211d;
}
.mode-dense .caption-line strong{font-size:clamp(16px,1.15vw,21px)}
.mode-dense .caption p{font-size:11px;line-height:1.54}
.mode-monumental .caption-line strong{font-size:clamp(20px,1.55vw,28px)}
.mode-monumental .caption p{font-size:12.5px;line-height:1.66}
.mode-quiet .caption p{max-width:33ch}

/* Lightbox */
.lb-title{
  font-family:var(--font-serif);
  font-size:clamp(34px,3vw,52px);
  line-height:.92;
  letter-spacing:-.04em;
  font-weight:500;
  margin:0 0 14px;
}
.lb-meta{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.55;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8f887e;
  margin-bottom:18px;
}
.lb-text{
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.7;
  letter-spacing:-.004em;
  color:#5a544c;
  margin:0 0 18px;
}
.lb-quote{
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.46;
  letter-spacing:-.01em;
  font-style:italic;
  color:#201c18;
}
.mode-dense .lb-title{font-size:clamp(28px,2.4vw,40px)}
.mode-monumental .lb-title{font-size:clamp(38px,3.3vw,58px)}

/* Archive / ending */
.archive-head h2{
  font-family:var(--font-serif);
  font-size:clamp(24px,2vw,36px);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0;
}
.archive-cap{
  padding-top:10px;
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.08;
  letter-spacing:-.02em;
}
.archive-cap span{
  display:block;
  margin-bottom:5px;
  color:#948c82;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.end-line span{
  font-size:9px;
  line-height:1.5;
}
.end-line button{
  font-size:10px;
  line-height:1.45;
}

/* Mobile tweaks */
@media(max-width:860px){
  .intro-copy h1{font-size:clamp(38px,11vw,58px)}
  .intro-copy p{font-size:12px;line-height:1.6}
  .featured-title strong{font-size:clamp(24px,7vw,34px)}
  .caption-line strong{font-size:clamp(18px,6vw,24px)}
  .lb-title{font-size:clamp(28px,9vw,40px)}
  .archive-cap{font-size:16px}
}


/* =========================================================
   ART DIRECTION EDITION
   Stronger magazine hierarchy, asymmetry and display rhythm.
========================================================= */

/* COVER / INTRO */
.intro-film{
  min-height:560px;
}
.intro-copy{
  max-width:min(920px,82vw);
}
.intro-copy::before{
  content:"PRIVATE ARCHIVE  /  ISSUE 01";
  display:block;
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6f685f;
}
.intro-copy h1{
  max-width:11.5ch;
  font-size:clamp(58px,6.4vw,118px);
  line-height:.82;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.intro-copy h1 span,
.intro-copy h1 em{
  display:block;
}
.intro-copy h1 em{
  position:relative;
  margin-left:.62em;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.045em;
}
.intro-copy h1 em::after{
  content:"";
  position:absolute;
  left:.04em;
  right:.18em;
  bottom:.04em;
  height:1px;
  background:currentColor;
  opacity:.3;
}
.intro-copy h1 span:last-child{
  margin-left:1.08em;
}
.intro-copy p{
  margin-top:28px;
  max-width:36ch;
  font-size:12px;
  line-height:1.72;
}
.mode-chip{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-align:left;
  line-height:1.7;
}
.scroll-note{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  bottom:24px;
  right:20px;
}

/* MODE-SPECIFIC COVER TYPOGRAPHY */
.mode-quiet .intro-copy h1{
  font-size:clamp(54px,5.8vw,104px);
  max-width:12ch;
}
.mode-dense .intro-copy h1{
  font-family:var(--font-sans);
  font-size:clamp(44px,5vw,84px);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:600;
  text-transform:uppercase;
  max-width:10.5ch;
}
.mode-dense .intro-copy h1 em{
  font-family:var(--font-serif);
  font-size:1.16em;
  font-weight:400;
  text-transform:none;
}
.mode-monumental .intro-copy h1{
  font-size:clamp(66px,7vw,132px);
  max-width:10.4ch;
}

/* FEATURED / ARTWORK OF THE DAY */
.featured{
  position:relative;
}
.featured::after{
  content:"01";
  position:absolute;
  z-index:0;
  top:clamp(54px,7vw,120px);
  right:var(--pad);
  font-family:var(--font-serif);
  font-size:clamp(160px,24vw,440px);
  line-height:.72;
  letter-spacing:-.08em;
  color:rgba(42,35,29,.035);
  pointer-events:none;
}
.featured > *{
  position:relative;
  z-index:1;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after{
  content:"";
  display:block;
  width:min(180px,18vw);
  height:1px;
  background:rgba(54,45,38,.22);
}
.featured-info{
  align-items:start;
  padding-top:22px;
}
.featured-title{
  grid-column:1/span 5;
}
.featured-title strong{
  font-size:clamp(34px,3.6vw,68px);
  line-height:.88;
  max-width:9ch;
}
.featured-copy{
  grid-column:7/span 3;
  padding-top:4px;
}
.featured-quote{
  grid-column:10/span 3;
  font-size:clamp(20px,1.55vw,28px);
}
.mode-monumental .featured-title strong{
  font-size:clamp(44px,4.4vw,82px);
}
.mode-dense .featured-title strong{
  font-family:var(--font-sans);
  font-size:clamp(26px,2.6vw,48px);
  font-weight:600;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

/* GRID CAPTIONS */
.caption{
  position:relative;
  padding-top:12px;
  border-top:1px solid rgba(64,53,43,.14);
}
.caption-line{
  position:relative;
  padding-left:0;
}
.caption-line .no{
  display:block;
  margin:0 0 8px;
}
.caption-line strong{
  display:block;
  width:fit-content;
  max-width:11ch;
  margin:0 0 5px;
  font-size:clamp(24px,2vw,38px);
  line-height:.9;
}
.caption-line .age{
  display:block;
  margin:9px 0 0;
}
.caption p{
  max-width:31ch;
  margin-top:12px;
}
.caption blockquote{
  max-width:25ch;
  margin-top:14px;
  font-size:clamp(16px,1.15vw,21px);
  line-height:1.33;
}
.work:nth-child(4n+2) .caption{
  margin-left:9%;
}
.work:nth-child(5n+3) .caption{
  margin-left:auto;
  margin-right:3%;
}
.work.feature .caption{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,34ch);
  gap:clamp(28px,5vw,90px);
  align-items:start;
  max-width:none;
}
.work.feature .caption-line{
  grid-column:1;
}
.work.feature .caption-line strong{
  font-size:clamp(42px,5vw,92px);
  max-width:8ch;
}
.work.feature .caption p,
.work.feature .caption blockquote{
  grid-column:2;
}
.work.feature .caption blockquote{
  margin-top:0;
  font-size:clamp(19px,1.5vw,28px);
}

/* MODE-SPECIFIC CAPTION SYSTEM */
.mode-quiet .caption{
  border-top-color:rgba(64,53,43,.09);
}
.mode-quiet .caption-line strong{
  font-size:clamp(22px,1.8vw,34px);
}
.mode-dense .caption{
  padding-top:9px;
}
.mode-dense .caption-line strong{
  font-family:var(--font-sans);
  font-size:clamp(18px,1.35vw,25px);
  line-height:.96;
  font-weight:600;
  letter-spacing:-.045em;
  text-transform:uppercase;
  max-width:14ch;
}
.mode-dense .caption p{
  margin-top:8px;
  font-size:10.5px;
  line-height:1.52;
}
.mode-dense .caption blockquote{
  font-size:14px;
}
.mode-monumental .caption-line strong{
  font-size:clamp(30px,2.5vw,48px);
}
.mode-monumental .work.feature .caption-line strong{
  font-size:clamp(58px,6vw,110px);
}

/* LIGHTBOX = MAGAZINE SPREAD */
.lightbox{
  grid-template-columns:minmax(0,1fr) clamp(220px,15vw,250px);
}
.lb-copy{
  max-width:250px;
  align-self:center;
}
.lb-count{
  position:relative;
  margin-bottom:36px;
}
.lb-count::after{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin-top:12px;
  background:rgba(54,45,38,.24);
}
.lb-title{
  font-size:clamp(42px,4.2vw,76px);
  line-height:.84;
  max-width:7ch;
  margin-bottom:20px;
}
.lb-meta{
  font-size:9px;
}
.lb-text{
  font-size:11px;
  line-height:1.72;
}
.lb-quote{
  font-size:19px;
  line-height:1.34;
}
.mode-dense .lb-title{
  font-family:var(--font-sans);
  font-size:clamp(30px,3vw,52px);
  font-weight:600;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

/* ARCHIVE = CATALOGUE INDEX */
.archive-head{
  align-items:flex-end;
}
.archive-head h2{
  font-size:clamp(46px,5.5vw,100px);
  line-height:.78;
  letter-spacing:-.055em;
}
.archive-grid{
  counter-reset:archive-item;
}
.archive-item{
  counter-increment:archive-item;
}
.archive-cap{
  font-size:21px;
  line-height:.94;
  padding-top:13px;
}
.archive-cap span{
  margin-bottom:8px;
}
.archive-item:nth-child(3n+2) .archive-cap{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.05;
  font-weight:600;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

/* END / FOLIO */
.end-line{
  align-items:flex-end;
}
.end-line button{
  font-family:var(--font-serif);
  font-size:clamp(24px,2.6vw,46px);
  line-height:.9;
  letter-spacing:-.03em;
  text-transform:none;
}
.end-line span{
  text-align:right;
  max-width:20ch;
}

/* MOBILE */
@media(max-width:860px){
  .intro-copy{
    max-width:88vw;
  }
  .intro-copy::before{
    margin-bottom:13px;
  }
  .intro-copy h1,
  .mode-quiet .intro-copy h1,
  .mode-dense .intro-copy h1,
  .mode-monumental .intro-copy h1{
    font-size:clamp(45px,13vw,70px);
    max-width:10ch;
  }
  .intro-copy h1 em{margin-left:.28em}
  .intro-copy h1 span:last-child{margin-left:.5em}
  .mode-chip{
    writing-mode:horizontal-tb;
    transform:none;
  }
  .scroll-note{display:none}

  .featured-title strong,
  .mode-monumental .featured-title strong,
  .mode-dense .featured-title strong{
    font-size:clamp(32px,10vw,48px);
  }
  .featured-quote{
    font-size:19px;
  }

  .caption-line strong,
  .mode-quiet .caption-line strong,
  .mode-dense .caption-line strong,
  .mode-monumental .caption-line strong{
    font-size:clamp(25px,8vw,38px);
    text-transform:none;
    font-family:var(--font-serif);
    font-weight:500;
  }
  .work:nth-child(4n+2) .caption,
  .work:nth-child(5n+3) .caption{
    margin-left:0;
    margin-right:0;
  }
  .work.feature .caption{
    display:block;
  }
  .work.feature .caption-line strong{
    font-size:clamp(38px,12vw,58px);
  }
  .work.feature .caption p,
  .work.feature .caption blockquote{
    margin-top:12px;
  }

  .lb-title,
  .mode-dense .lb-title{
    font-family:var(--font-serif);
    font-size:clamp(34px,11vw,52px);
    text-transform:none;
    font-weight:500;
    max-width:10ch;
  }

  .archive-head h2{
    font-size:clamp(42px,12vw,66px);
  }
  .archive-cap,
  .archive-item:nth-child(3n+2) .archive-cap{
    font-family:var(--font-serif);
    font-size:18px;
    font-weight:500;
    text-transform:none;
  }
  .end-line button{
    font-size:28px;
  }
}


/* =========================================================
   INK HOVER + PAPER SWAP
   Hover lives mainly in typography. Lightbox navigation
   behaves like replacing one physical sheet with another.
========================================================= */

/* Each exhibition mode gets one restrained editorial ink. */
.mode-quiet{
  --hover-ink:#9a4938;      /* brick / dried red pigment */
  --hover-ink-soft:rgba(154,73,56,.10);
  --hover-ink-line:rgba(154,73,56,.44);
}
.mode-dense{
  --hover-ink:#315f9d;      /* cobalt / printing ink */
  --hover-ink-soft:rgba(49,95,157,.10);
  --hover-ink-line:rgba(49,95,157,.44);
}
.mode-monumental{
  --hover-ink:#a76927;      /* ochre / studio pigment */
  --hover-ink-soft:rgba(167,105,39,.11);
  --hover-ink-line:rgba(167,105,39,.46);
}

/* ---------------------------------------------------------
   ARTWORK HOVER
   Keep the artwork itself almost still. Let the caption
   become the active, editorial part of the interaction.
--------------------------------------------------------- */
.work .media{
  transition:
    box-shadow .32s ease,
    border-color .32s ease,
    filter .32s ease,
    transform .32s ease;
}
.work .media img,
.work .media video{
  transition:filter .34s ease,opacity .34s ease;
}

/* Kill the digital zoom feeling from earlier versions. */
.work:hover .media{
  transform:rotate(var(--tilt));
  border-color:var(--hover-ink-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 8px 24px rgba(61,49,38,.05);
}
.work:hover .media img,
.work:hover .media video{
  transform:none;
  filter:contrast(1.018) saturate(.94);
}

/* A very light ink veil appears on the physical "sheet". */
.media::after,
.featured-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:var(--hover-ink);
  opacity:0;
  mix-blend-mode:multiply;
  transition:opacity .32s ease;
}
.work:hover .media::after,
.featured-media:hover::after{
  opacity:.028;
}

/* Typography is the main hover event. */
.caption-line strong,
.caption-line .no,
.caption-line .age,
.caption p,
.caption blockquote{
  transition:
    color .28s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease;
}
.work:hover .caption-line strong{
  color:var(--hover-ink);
  transform:translateX(4px);
}
.work:hover .caption-line .no{
  color:var(--hover-ink);
}
.work:hover .caption-line .age{
  color:var(--hover-ink);
}
.work:hover .caption p{
  color:#494238;
}
.work:hover .caption blockquote{
  color:var(--hover-ink);
}

/* Fine editorial rule that grows in, like a registration mark. */
.caption::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-top:13px;
  background:var(--hover-ink);
  opacity:.72;
  transition:width .42s cubic-bezier(.2,.8,.2,1);
}
.work:hover .caption::after{
  width:min(58px,28%);
}

/* Artwork of the day gets the same ink behavior. */
.featured-title strong,
.featured-title .no,
.featured-copy,
.featured-quote{
  transition:color .3s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.featured-media:hover + .featured-info .featured-title strong{
  color:var(--hover-ink);
  transform:translateX(5px);
}
.featured-media:hover + .featured-info .featured-title .no,
.featured-media:hover + .featured-info .featured-quote{
  color:var(--hover-ink);
}

/* Cursor becomes an editorial proofing mark rather than a black UI blob. */
.cursor{
  width:74px;
  height:74px;
  background:rgba(246,242,233,.88);
  color:var(--hover-ink);
  border:1px solid var(--hover-ink);
  box-shadow:0 3px 16px rgba(50,40,30,.07);
  backdrop-filter:blur(2px);
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:500;
  letter-spacing:.15em;
}
.cursor::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--hover-ink);
  top:8px;
  right:11px;
  opacity:.9;
}

/* ---------------------------------------------------------
   LIGHTBOX: PAPER SWAP
   No sideways UI slide. The current sheet lifts/fades,
   the next sheet is placed down and settles into position.
--------------------------------------------------------- */
.lb-media{
  transform-origin:50% 55%;
  transition:
    opacity .24s ease,
    transform .29s cubic-bezier(.2,.78,.22,1),
    filter .24s ease;
}
.lb-media img,
.lb-media video{
  box-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 9px 28px rgba(61,49,38,.055);
}

/* Next and previous differ only by a tiny natural hand rotation. */
.lb-media.switch-next{
  opacity:0;
  transform:scale(.984) rotate(.42deg);
  filter:blur(.45px);
}
.lb-media.switch-prev{
  opacity:0;
  transform:scale(.984) rotate(-.42deg);
  filter:blur(.45px);
}

/* A small "table shadow" appears as the sheet settles. */
.lb-media::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(56vw,760px);
  height:22px;
  left:50%;
  bottom:4.5%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(55,44,34,.055);
  filter:blur(14px);
  opacity:.7;
  pointer-events:none;
}

/* Navigation typography reacts to the same exhibition ink. */
.lb-nav button,
.lb-close{
  transition:color .22s ease;
}
.lb-nav button:hover,
.lb-close:hover{
  color:var(--hover-ink);
}

/* Archive gets the same typographic ink, but without motion. */
.archive-item .archive-cap{
  transition:color .26s ease;
}
.archive-item:hover .archive-cap{
  color:var(--hover-ink);
}
.archive-item:hover .archive-cap span{
  color:var(--hover-ink);
}

@media(hover:none){
  .caption::after{display:none}
}


/* =========================================================
   PIGMENT HOVER REFINEMENT
   No outline, no text movement, no generic underline.
   Hover is reduced to a quiet pigment response in the type.
========================================================= */

/* Remove border emphasis and movement from artwork hover. */
.work:hover .media{
  transform:rotate(var(--tilt));
  border-color:rgba(63,53,43,.045);
  box-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 7px 25px rgba(61,49,38,.045);
}
.work:hover .media img,
.work:hover .media video{
  transform:none;
  filter:contrast(1.012) saturate(.965);
}

/* No positional movement in typography. */
.work:hover .caption-line strong,
.featured-media:hover + .featured-info .featured-title strong{
  transform:none;
}

/* Remove the generic drawing line completely. */
.caption::after,
.work:hover .caption::after{
  content:none !important;
  display:none !important;
}

/* Pigment lives only in selected editorial type.
   It feels more like ink touching paper than UI feedback. */
.caption-line strong{
  position:relative;
  transition:color .42s ease,text-shadow .42s ease;
}
.caption-line .no,
.caption-line .age,
.caption blockquote{
  transition:color .42s ease;
}
.work:hover .caption-line strong{
  color:var(--hover-ink);
  text-shadow:
    .018em .012em 0 color-mix(in srgb, var(--hover-ink) 18%, transparent),
    -.012em .008em 0 color-mix(in srgb, var(--hover-ink) 10%, transparent);
}
.work:hover .caption-line .no,
.work:hover .caption-line .age{
  color:color-mix(in srgb, var(--hover-ink) 72%, #6d665e);
}
.work:hover .caption blockquote{
  color:var(--hover-ink);
}
.work:hover .caption p{
  color:#625c53;
}

/* Artwork of the Day: only the title and quote pick up pigment. */
.featured-title strong,
.featured-quote{
  transition:color .42s ease,text-shadow .42s ease;
}
.featured-media:hover + .featured-info .featured-title strong{
  color:var(--hover-ink);
  text-shadow:
    .018em .012em 0 color-mix(in srgb, var(--hover-ink) 16%, transparent);
}
.featured-media:hover + .featured-info .featured-quote{
  color:var(--hover-ink);
}
.featured-media:hover + .featured-info .featured-title .no{
  color:#9a938a;
}

/* Remove visible hover outline from featured image too. */
.featured-media:hover{
  border-color:rgba(64,53,42,.04);
}

/* Keep the cursor subtle and pigment-based, but without extra "UI" theatrics. */
.cursor{
  width:66px;
  height:66px;
  background:rgba(246,242,233,.78);
  border:0;
  box-shadow:none;
  color:var(--hover-ink);
  backdrop-filter:blur(1.5px);
}
.cursor::before{
  width:5px;
  height:5px;
  top:9px;
  right:10px;
  opacity:.72;
}

/* Archive hover mirrors the same quiet pigment logic. */
.archive-item:hover .archive-cap{
  color:var(--hover-ink);
}
.archive-item:hover .archive-cap span{
  color:color-mix(in srgb, var(--hover-ink) 68%, #777);
}


/* =========================================================
   FRAME LAB — THREE REAL-WORLD FRAME DIRECTIONS
   Visible only in the enlarged artwork view.
========================================================= */

/* Lightbox becomes a physical wall. */
.lightbox{
  position:fixed;
  isolation:isolate;
}
.lightbox::before,
.lightbox::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

/* -------- 01 BAROQUE / CASTLE -------- */
.lightbox.frame-style-baroque{
  background:
    radial-gradient(ellipse at 50% -5%, rgba(255,246,214,.16), transparent 38%),
    linear-gradient(180deg,#705f52 0%,#625349 44%,#584a42 100%) !important;
}
.lightbox.frame-style-baroque::before{
  background:
    radial-gradient(circle at 22px 22px,rgba(224,206,174,.09) 0 2px,transparent 2.5px),
    radial-gradient(circle at 0 0,rgba(34,25,19,.08) 0 1px,transparent 1.5px),
    repeating-linear-gradient(90deg,transparent 0 82px,rgba(255,255,255,.025) 82px 83px),
    repeating-linear-gradient(0deg,transparent 0 72px,rgba(0,0,0,.018) 72px 73px);
  background-size:44px 44px,44px 44px,auto,auto;
  mix-blend-mode:soft-light;
  opacity:.92;
}
.lightbox.frame-style-baroque::after{
  box-shadow:inset 0 0 180px rgba(15,9,6,.34);
}

/* -------- 02 MUSEUM -------- */
.lightbox.frame-style-museum{
  background:
    radial-gradient(ellipse at 46% 0%,rgba(255,255,255,.62),transparent 38%),
    linear-gradient(180deg,#e7e1d5 0%,#dcd4c7 100%) !important;
}
.lightbox.frame-style-museum::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),rgba(100,88,72,.018)),
    radial-gradient(circle at 18% 22%,rgba(115,95,72,.03),transparent 24%);
  opacity:.7;
}
.lightbox.frame-style-museum::after{
  box-shadow:inset 0 0 120px rgba(66,53,38,.07);
}

/* -------- 03 DARK ANTIQUE COLLECTOR -------- */
.lightbox.frame-style-antique{
  background:
    radial-gradient(ellipse at 48% -6%,rgba(244,225,172,.11),transparent 34%),
    linear-gradient(180deg,#3c433b 0%,#333b35 55%,#2b322e 100%) !important;
}
.lightbox.frame-style-antique::before{
  background:
    repeating-linear-gradient(90deg,rgba(236,224,195,.025) 0 1px,transparent 1px 74px),
    radial-gradient(circle at 30% 30%,rgba(151,125,84,.04),transparent 22%);
  opacity:.95;
}
.lightbox.frame-style-antique::after{
  box-shadow:inset 0 0 170px rgba(8,8,7,.42);
}

/* Frame-style picker for this demo */
.frame-switcher{
  position:absolute;
  z-index:7;
  top:18px;
  left:var(--pad);
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d9cdbb;
}
.frame-switcher .label{
  opacity:.62;
  margin-right:2px;
}
.frame-switcher button{
  border:0;
  padding:4px 0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  opacity:.55;
  border-bottom:1px solid transparent;
}
.frame-switcher button:hover,
.frame-switcher button.active{
  opacity:1;
  border-bottom-color:currentColor;
}
.frame-style-museum .frame-switcher{color:#544c43}

/* Stage / wall hanging */
.lb-media{
  position:relative;
  padding:clamp(30px,4vw,62px);
}
.lb-stage{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  max-width:100%;
  max-height:100%;
  perspective:1200px;
}
.lb-stage::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-28px;
  width:min(50vw,680px);
  height:30px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(13,9,6,.20);
  filter:blur(17px);
  opacity:.65;
  z-index:-1;
}

/* Shared frame geometry */
.lb-frame{
  --frame-depth:30px;
  position:relative;
  display:grid;
  place-items:center;
  padding:var(--frame-depth);
  max-width:min(70vw,1000px);
  max-height:min(80vh,1050px);
  transform:rotate(.08deg);
}
.lb-frame::before,
.lb-frame::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.lb-art{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  max-width:min(63vw,900px);
  max-height:min(70vh,910px);
}
.lb-art img,
.lb-art video{
  display:block;
  width:auto;
  height:auto;
  max-width:min(60vw,860px);
  max-height:min(66vh,860px);
  object-fit:contain;
}

/* =========================================================
   BAROQUE FRAME
========================================================= */
.frame-baroque{
  --frame-depth:clamp(28px,2.5vw,42px);
  background:
    linear-gradient(135deg,#5a380c 0%,#a87820 7%,#f0d58a 15%,#9a6719 24%,#e0b85b 39%,#6b430f 54%,#d9ae4f 68%,#f4dfa1 82%,#7d5013 100%);
  border:1px solid #4e2e08;
  box-shadow:
    inset 0 0 0 2px rgba(255,237,181,.30),
    inset 0 0 18px rgba(66,39,6,.45),
    0 0 0 2px rgba(73,43,7,.62),
    0 0 0 5px rgba(222,184,93,.26),
    0 20px 46px rgba(18,10,5,.30);
}
.frame-baroque::before{
  inset:7px;
  border:3px ridge rgba(233,203,124,.72);
  box-shadow:
    inset 0 0 0 5px rgba(89,54,9,.36),
    inset 0 0 0 7px rgba(244,218,150,.20);
}
.frame-baroque::after{
  inset:15px;
  border:2px solid rgba(82,51,12,.74);
  box-shadow:
    inset 0 0 0 1px rgba(250,229,168,.46),
    inset 0 0 16px rgba(73,42,6,.30);
}
.frame-baroque .lb-art{
  padding:clamp(11px,1vw,16px);
  background:#e8dfcd;
  box-shadow:
    inset 0 0 0 1px rgba(112,88,52,.36),
    inset 0 0 0 8px rgba(246,239,223,.62),
    inset 0 0 20px rgba(89,63,26,.12);
}
.frame-baroque .lb-art::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(142,107,52,.28);
  pointer-events:none;
}

/* Real decorative corners */
.lb-ornament{
  display:none;
  position:absolute;
  width:70px;
  height:70px;
  z-index:5;
  pointer-events:none;
}
.frame-baroque .lb-ornament{display:block}
.lb-ornament::before,
.lb-ornament::after{
  content:"";
  position:absolute;
}
.lb-ornament::before{
  inset:0;
  background:
    radial-gradient(ellipse at 18% 18%,#f4dda0 0 8%,transparent 9%),
    radial-gradient(ellipse at 44% 22%,#c49232 0 9%,transparent 10%),
    radial-gradient(ellipse at 24% 48%,#e8c469 0 12%,transparent 13%),
    radial-gradient(ellipse at 58% 52%,#8a5714 0 7%,transparent 8%),
    conic-gradient(from 232deg at 27% 27%,#f5dfa0 0 14%,#9a671c 14% 26%,#d3a544 26% 39%,#6d420d 39% 47%,transparent 47%);
  filter:drop-shadow(0 1px 1px rgba(60,35,8,.5));
}
.lb-ornament::after{
  width:44px;height:14px;
  left:18px;top:40px;
  border-radius:50%;
  background:linear-gradient(90deg,#805014,#efce7d,#8b5917);
  transform:rotate(-38deg);
  opacity:.8;
}
.lb-ornament.tl{top:-19px;left:-19px}
.lb-ornament.tr{top:-19px;right:-19px;transform:scaleX(-1)}
.lb-ornament.bl{bottom:-19px;left:-19px;transform:scaleY(-1)}
.lb-ornament.br{bottom:-19px;right:-19px;transform:scale(-1)}

/* =========================================================
   MUSEUM FRAME
========================================================= */
.frame-museum{
  --frame-depth:clamp(12px,1.2vw,18px);
  background:
    repeating-linear-gradient(90deg,
      rgba(116,82,47,.18) 0 1px,
      rgba(232,213,183,.12) 1px 7px),
    linear-gradient(135deg,#b58c60 0%,#d4b187 36%,#9f784f 66%,#c7a477 100%);
  border:1px solid rgba(83,57,34,.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,224,.32),
    0 12px 30px rgba(54,42,30,.14);
}
.frame-museum::before{
  inset:5px;
  border:1px solid rgba(69,47,29,.38);
}
.frame-museum .lb-art{
  padding:clamp(24px,2vw,34px);
  background:#f2eee5;
  box-shadow:inset 0 0 0 1px rgba(95,83,68,.18);
}
.frame-museum .lb-art img,
.frame-museum .lb-art video{
  box-shadow:0 0 0 1px rgba(55,47,40,.10);
}

/* =========================================================
   DARK ANTIQUE FRAME
========================================================= */
.frame-antique{
  --frame-depth:clamp(24px,2.1vw,34px);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.04) 1px 8px),
    linear-gradient(135deg,#160f0b 0%,#3b291d 18%,#1f1510 36%,#5b3c24 49%,#201610 67%,#412c20 84%,#130e0b 100%);
  border:1px solid #0d0907;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.78),
    0 0 0 2px rgba(13,9,7,.92),
    0 17px 42px rgba(4,4,3,.38);
}
.frame-antique::before{
  inset:7px;
  border:3px double rgba(173,128,56,.62);
  box-shadow:
    inset 0 0 0 4px rgba(8,6,4,.55),
    inset 0 0 0 5px rgba(188,143,66,.22);
}
.frame-antique::after{
  inset:14px;
  border:1px solid rgba(205,157,75,.55);
}
.frame-antique .lb-art{
  padding:clamp(10px,.9vw,15px);
  background:#30291f;
  box-shadow:
    inset 0 0 0 1px rgba(197,157,91,.28),
    inset 0 0 0 7px rgba(34,28,22,.82);
}
.frame-antique .lb-art img,
.frame-antique .lb-art video{
  box-shadow:0 0 0 1px rgba(215,188,139,.12);
}

/* Lightbox text colors follow the room. */
.frame-style-baroque .lb-copy,
.frame-style-antique .lb-copy{color:#f2e7d6}
.frame-style-baroque .lb-title,
.frame-style-antique .lb-title{color:#fff4df}
.frame-style-baroque .lb-meta,
.frame-style-antique .lb-meta{color:#cab99d}
.frame-style-baroque .lb-text,
.frame-style-antique .lb-text{color:#eadfce}
.frame-style-baroque .lb-quote{color:#f0cc74}
.frame-style-antique .lb-quote{color:#d3a75b}
.frame-style-baroque .lb-count,
.frame-style-baroque .lb-close,
.frame-style-baroque .lb-nav button,
.frame-style-antique .lb-count,
.frame-style-antique .lb-close,
.frame-style-antique .lb-nav button{color:#e5d5bd}

.frame-style-museum .lb-copy{color:#2b2824}
.frame-style-museum .lb-title{color:#181613}
.frame-style-museum .lb-meta{color:#71695f}
.frame-style-museum .lb-text{color:#4d473f}
.frame-style-museum .lb-quote{color:#7d4e2e}
.frame-style-museum .lb-count,
.frame-style-museum .lb-close,
.frame-style-museum .lb-nav button{color:#4e4841}

/* Mobile keeps the selected frame but reduces depth. */
@media(max-width:860px){
  .frame-switcher{
    top:12px;
    left:18px;
    gap:8px;
    flex-wrap:wrap;
    max-width:70vw;
  }
  .frame-switcher .label{display:none}
  .lb-media{padding:54px 0 8px}
  .lb-frame{
    max-width:100%;
    max-height:none;
  }
  .lb-art{
    max-width:100%;
    max-height:none;
  }
  .lb-art img,
  .lb-art video{
    max-width:100%;
    max-height:60vh;
  }
  .lb-ornament{width:46px;height:46px}
  .lb-ornament.tl{top:-12px;left:-12px}
  .lb-ornament.tr{top:-12px;right:-12px}
  .lb-ornament.bl{bottom:-12px;left:-12px}
  .lb-ornament.br{bottom:-12px;right:-12px}
}


/* =========================================================
   GALLERY-WALL SLIDE
   The framed artwork physically leaves the wall and the next
   framed artwork enters from the corresponding side.
========================================================= */

.lb-media{
  overflow:hidden;
}

/* The wall stays still; only the framed artwork travels. */
.lb-stage{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:clamp(30px,4vw,62px);
  max-width:none;
  max-height:none;
  perspective:1400px;
  will-change:transform,opacity;
  transition:
    transform 820ms cubic-bezier(.22,.76,.24,1),
    opacity 620ms ease;
}

/* Resting artwork. */
.lb-stage.frame-rest{
  transform:translate3d(0,0,0) rotate(0deg);
  opacity:1;
}

/* NEXT: current work leaves left, next comes from right. */
.lb-stage.frame-exit-left{
  transform:translate3d(-118vw,0,0) rotate(-1.25deg);
  opacity:.92;
}
.lb-stage.frame-enter-right{
  transform:translate3d(118vw,0,0) rotate(1.25deg);
  opacity:.96;
}

/* PREVIOUS: current work leaves right, previous comes from left. */
.lb-stage.frame-exit-right{
  transform:translate3d(118vw,0,0) rotate(1.25deg);
  opacity:.92;
}
.lb-stage.frame-enter-left{
  transform:translate3d(-118vw,0,0) rotate(-1.25deg);
  opacity:.96;
}

/* Tiny physical inertia when a framed piece settles on the wall. */
.lb-stage.frame-arrived .lb-frame{
  animation:frame-settle 430ms cubic-bezier(.2,.78,.22,1) both;
}
@keyframes frame-settle{
  0%{transform:rotate(.08deg) translateY(0)}
  38%{transform:rotate(-.10deg) translateY(1px)}
  72%{transform:rotate(.05deg) translateY(0)}
  100%{transform:rotate(.08deg) translateY(0)}
}

/* Text changes more quietly than the artwork itself. */
.lb-copy{
  transition:opacity 220ms ease,filter 220ms ease;
}
.lb-copy.frame-copy-out{
  opacity:.08;
  filter:blur(1px);
}

/* Disable the old media-level transition so it cannot fight the frame travel. */
.lb-media.switch-next,
.lb-media.switch-prev{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

@media(max-width:860px){
  .lb-stage{
    padding:54px 0 8px;
  }
  .lb-stage.frame-exit-left{transform:translate3d(-125vw,0,0) rotate(-.8deg)}
  .lb-stage.frame-enter-right{transform:translate3d(125vw,0,0) rotate(.8deg)}
  .lb-stage.frame-exit-right{transform:translate3d(125vw,0,0) rotate(.8deg)}
  .lb-stage.frame-enter-left{transform:translate3d(-125vw,0,0) rotate(-.8deg)}
}

@media(prefers-reduced-motion:reduce){
  .lb-stage{transition:opacity .16s linear}
  .lb-stage.frame-exit-left,
  .lb-stage.frame-exit-right,
  .lb-stage.frame-enter-left,
  .lb-stage.frame-enter-right{
    transform:none;
  }
  .lb-stage.frame-arrived .lb-frame{animation:none}
}


/* =========================================================
   FULL-VIEWPORT FRAME TRAVEL
   The framed artwork moves across the entire browser viewport,
   not only inside the media column.
========================================================= */

/* Important: the media column must no longer be the clipping container. */
.lb-media{
  position:static !important;
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
}

/* Keep text/navigation above the travelling artwork. */
.lb-copy{
  position:relative;
  z-index:8;
}
.lb-close,
.lb-nav,
.frame-switcher{
  z-index:12;
}

/* The moving stage is now literally viewport-sized. */
.lb-stage{
  position:fixed !important;
  inset:0 !important;
  z-index:4;
  width:100vw;
  height:100vh;
  max-width:none !important;
  max-height:none !important;
  display:grid;
  place-items:center;
  box-sizing:border-box;

  /* Leaves visual room for the copy while the artwork is resting,
     without constraining the travel path itself. */
  padding:
    clamp(48px,5vw,78px)
    clamp(260px,18vw,330px)
    clamp(48px,5vw,78px)
    clamp(28px,3vw,56px);

  pointer-events:none;
  perspective:1600px;
  will-change:transform,opacity;
}

/* Media controls still work because only the frame itself receives pointer events. */
.lb-stage .lb-frame{
  pointer-events:auto;
}

/* Resting position */
.lb-stage.frame-rest{
  transform:translate3d(0,0,0) rotate(0deg);
  opacity:1;
}

/* EXIT: accelerate naturally all the way beyond the browser edge. */
.lb-stage.frame-exit-left{
  transform:translate3d(-132vw,0,0) rotate(-1.45deg);
  opacity:.98;
  transition:
    transform 640ms cubic-bezier(.58,.02,.82,.42),
    opacity 560ms ease;
}
.lb-stage.frame-exit-right{
  transform:translate3d(132vw,0,0) rotate(1.45deg);
  opacity:.98;
  transition:
    transform 640ms cubic-bezier(.58,.02,.82,.42),
    opacity 560ms ease;
}

/* ENTER: the new frame begins completely beyond the opposite viewport edge. */
.lb-stage.frame-enter-right{
  transform:translate3d(132vw,0,0) rotate(1.25deg);
  opacity:1;
}
.lb-stage.frame-enter-left{
  transform:translate3d(-132vw,0,0) rotate(-1.25deg);
  opacity:1;
}

/* Separate easing for the incoming artwork: fast at first, then it settles. */
.lb-stage.frame-incoming{
  transition:
    transform 780ms cubic-bezier(.16,.82,.25,1),
    opacity 520ms ease;
}

/* No old container-level animation may interfere. */
.lb-media.switch-next,
.lb-media.switch-prev{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* The frame shadow follows the object, not the media column. */
.lb-stage::after{
  bottom:clamp(24px,4vh,52px);
}

/* Mobile: still edge-to-edge, but centered because the copy sits below. */
@media(max-width:860px){
  .lb-stage{
    padding:54px 14px 150px;
  }
  .lb-stage.frame-exit-left{
    transform:translate3d(-142vw,0,0) rotate(-.9deg);
  }
  .lb-stage.frame-exit-right{
    transform:translate3d(142vw,0,0) rotate(.9deg);
  }
  .lb-stage.frame-enter-right{
    transform:translate3d(142vw,0,0) rotate(.8deg);
  }
  .lb-stage.frame-enter-left{
    transform:translate3d(-142vw,0,0) rotate(-.8deg);
  }
}

@media(prefers-reduced-motion:reduce){
  .lb-stage.frame-exit-left,
  .lb-stage.frame-exit-right,
  .lb-stage.frame-enter-left,
  .lb-stage.frame-enter-right{
    transform:none;
  }
  .lb-stage.frame-exit-left,
  .lb-stage.frame-exit-right,
  .lb-stage.frame-incoming{
    transition:opacity .16s linear;
  }
}


/* =========================================================
   MOBILE LIGHTBOX + NATIVE-FEEL SWIPE
   On phones the artwork occupies a full-viewport-width stage,
   while the caption continues naturally underneath it.
========================================================= */

/* Finger gestures are handled only on the artwork zone.
   Vertical scrolling remains native; horizontal panning becomes navigation. */
.lb-media{
  touch-action:pan-y;
  overscroll-behavior-x:none;
  -webkit-user-select:none;
  user-select:none;
}

@media(max-width:860px){
  .lightbox.open{
    display:flex !important;
    flex-direction:column;
    gap:0;
    padding:0 18px 18px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Full browser width: the frame really enters/leaves at the screen edges. */
  .lb-media{
    position:relative !important;
    order:1;
    flex:0 0 auto;
    width:100vw;
    height:68svh;
    min-height:430px;
    margin-left:-18px;
    margin-right:-18px;
    overflow:hidden !important;
    display:block;
    touch-action:pan-y;
  }

  .lb-stage{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    padding:68px 18px 24px !important;
    display:grid;
    place-items:center;
  }

  .lb-stage::after{
    bottom:15px;
  }

  .lb-frame{
    max-width:calc(100vw - 34px);
    max-height:calc(68svh - 96px);
  }
  .lb-art{
    max-width:calc(100vw - 68px);
    max-height:calc(68svh - 132px);
  }
  .lb-art img,
  .lb-art video{
    max-width:calc(100vw - 90px);
    max-height:calc(68svh - 155px);
  }

  /* Description is genuinely below the framed artwork on mobile. */
  .lb-copy{
    order:2;
    position:relative;
    align-self:stretch;
    width:100%;
    max-width:none;
    padding:30px 0 18px;
    z-index:8;
  }
  .lb-title,
  .mode-dense .lb-title{
    max-width:11ch;
  }
  .lb-text{max-width:42ch}
  .lb-quote{max-width:31ch}

  .lb-nav{
    position:relative;
    order:3;
    left:auto;
    bottom:auto;
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:8px 0 26px;
    z-index:9;
  }

  .lb-close{
    position:fixed;
    top:10px;
    right:18px;
    z-index:20;
  }
  .frame-switcher{
    position:fixed;
    top:10px;
    left:18px;
    z-index:20;
    max-width:68vw;
  }

  /* Full-width directional travel on mobile. */
  .lb-stage.frame-exit-left{transform:translate3d(-145vw,0,0) rotate(-.85deg)}
  .lb-stage.frame-exit-right{transform:translate3d(145vw,0,0) rotate(.85deg)}
  .lb-stage.frame-enter-right{transform:translate3d(145vw,0,0) rotate(.75deg)}
  .lb-stage.frame-enter-left{transform:translate3d(-145vw,0,0) rotate(-.75deg)}
}

@media(max-width:860px) and (max-height:700px){
  .lb-media{height:64svh;min-height:360px}
  .lb-frame{max-height:calc(64svh - 86px)}
  .lb-art{max-height:calc(64svh - 118px)}
  .lb-art img,.lb-art video{max-height:calc(64svh - 140px)}
}


/* =========================================================
   SIX CONSISTENT FRAME FAMILIES
   Each work receives one stable frame. The same frame family
   appears in the overview, archive and enlarged wall view.
========================================================= */
.frame-switcher{display:none !important}

/* Strong frames directly in the grid / featured view / archive. */
.frame-card{
  position:relative;
  overflow:visible;
  padding:clamp(10px,1.1vw,18px);
  border:1px solid var(--frame-border, rgba(80,62,36,.28));
  background:var(--frame-bg, linear-gradient(135deg,#c9b08a,#a27d56));
  box-shadow:
    inset 0 0 0 1px var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 0 0 4px var(--frame-inner-shadow, rgba(76,54,26,.10)),
    0 10px 26px rgba(36,26,16,.08);
}
.featured-media.frame-card{padding:clamp(12px,1.25vw,20px)}
.work.feature .media.frame-card{padding:clamp(14px,1.4vw,22px)}
.archive-thumb.frame-card{padding:10px}
.frame-card::before{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;
  border:1px solid var(--frame-line, rgba(87,62,24,.25));
  box-shadow:inset 0 0 0 1px var(--frame-line2, rgba(255,243,209,.14));
}
.frame-card img,.frame-card video{
  background:var(--mat-bg, #efe7d8);
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.16),
    inset 0 0 0 8px rgba(247,241,228,.54),
    0 3px 10px rgba(26,18,12,.08);
}
.featured-media.frame-card img,.featured-media.frame-card video,
.work .media.frame-card img,.work .media.frame-card video,
.archive-thumb.frame-card img,.archive-thumb.frame-card video{
  width:100%;height:100%;object-fit:contain;display:block;
}

/* 01 Baroque gold */
.frame-baroque{
  --frame-bg:linear-gradient(135deg,#5d380b 0%,#a97821 8%,#efcf82 17%,#8c5e17 31%,#e3bb60 49%,#6d450f 63%,#d9ab4c 79%,#f3dea0 90%,#835415 100%);
  --frame-border:#553209;
  --frame-highlight:rgba(255,239,180,.34);
  --frame-inner-shadow:rgba(77,48,8,.34);
  --frame-line:rgba(88,56,13,.72);
  --frame-line2:rgba(244,225,154,.30);
  --mat-bg:#ebe2d0;
}

/* 02 Museum oak */
.frame-museum{
  --frame-bg:linear-gradient(135deg,#8f6846 0%,#d0ae82 35%,#9f784f 62%,#c8a073 100%);
  --frame-border:rgba(88,62,36,.56);
  --frame-highlight:rgba(249,237,217,.24);
  --frame-inner-shadow:rgba(74,50,28,.20);
  --frame-line:rgba(78,56,32,.42);
  --frame-line2:rgba(255,249,237,.16);
  --mat-bg:#f2ede2;
}

/* 03 Antique dark */
.frame-antique{
  --frame-bg:linear-gradient(135deg,#18110d 0%,#4a3221 18%,#211610 42%,#65452a 60%,#231811 78%,#120d0a 100%);
  --frame-border:#140e0a;
  --frame-highlight:rgba(188,145,74,.20);
  --frame-inner-shadow:rgba(0,0,0,.42);
  --frame-line:rgba(194,149,71,.52);
  --frame-line2:rgba(0,0,0,.16);
  --mat-bg:#30291f;
}

/* 04 White gesso */
.frame-gesso{
  --frame-bg:linear-gradient(135deg,#f0ece4 0%,#d6cdc0 24%,#fbf9f4 52%,#d9d0c3 74%,#f0ebe3 100%);
  --frame-border:rgba(145,132,116,.42);
  --frame-highlight:rgba(255,255,255,.52);
  --frame-inner-shadow:rgba(124,112,95,.11);
  --frame-line:rgba(155,143,126,.34);
  --frame-line2:rgba(255,255,255,.20);
  --mat-bg:#f7f2ea;
}

/* 05 Slim brass */
.frame-brass{
  --frame-bg:linear-gradient(135deg,#564722 0%,#a88739 16%,#dbc472 36%,#6d5824 57%,#c4a34a 79%,#4e401b 100%);
  --frame-border:rgba(84,64,22,.58);
  --frame-highlight:rgba(255,245,196,.26);
  --frame-inner-shadow:rgba(76,58,19,.18);
  --frame-line:rgba(92,69,21,.40);
  --frame-line2:rgba(255,248,205,.14);
  --mat-bg:#f1ead9;
}

/* 06 Painted studio */
.frame-studio{
  --frame-bg:linear-gradient(135deg,#7f5441 0%,#c38d6f 18%,#e5c29c 32%,#6a7d67 52%,#4f6782 74%,#9b6a54 100%);
  --frame-border:rgba(82,62,48,.56);
  --frame-highlight:rgba(255,242,230,.18);
  --frame-inner-shadow:rgba(68,54,42,.18);
  --frame-line:rgba(93,70,56,.36);
  --frame-line2:rgba(255,249,239,.12);
  --mat-bg:#efe7db;
}

/* Overview hover stays subtle; the frame itself should not change shape. */
.work:hover .media.frame-card,
.featured-media.frame-card:hover,
.archive-item:hover .archive-thumb.frame-card{
  border-color:var(--frame-border);
  box-shadow:
    inset 0 0 0 1px var(--frame-highlight),
    inset 0 0 0 4px var(--frame-inner-shadow),
    0 12px 28px rgba(34,24,15,.10);
}

/* Lightbox wall palettes for all six frame families. */
.lightbox.frame-style-baroque{
  background:radial-gradient(ellipse at 50% -5%, rgba(255,246,214,.16), transparent 38%), linear-gradient(180deg,#705f52 0%,#625349 44%,#584a42 100%) !important;
}
.lightbox.frame-style-museum{
  background:radial-gradient(ellipse at 46% 0%,rgba(255,255,255,.62),transparent 38%), linear-gradient(180deg,#e7e1d5 0%,#dcd4c7 100%) !important;
}
.lightbox.frame-style-antique{
  background:radial-gradient(ellipse at 48% -6%,rgba(244,225,172,.11),transparent 34%), linear-gradient(180deg,#3c433b 0%,#333b35 55%,#2b322e 100%) !important;
}
.lightbox.frame-style-gesso{
  background:radial-gradient(ellipse at 52% 0%,rgba(255,255,255,.72),transparent 42%), linear-gradient(180deg,#ede7dc 0%,#e0d7c8 100%) !important;
}
.lightbox.frame-style-brass{
  background:radial-gradient(ellipse at 52% -4%,rgba(255,243,196,.12),transparent 36%), linear-gradient(180deg,#4d4942 0%,#423e38 48%,#383530 100%) !important;
}
.lightbox.frame-style-studio{
  background:radial-gradient(ellipse at 48% 0%,rgba(244,228,206,.18),transparent 36%), linear-gradient(180deg,#746659 0%,#64584f 44%,#5a5149 100%) !important;
}

/* Add two extra lightbox frame families. */
.frame-gesso .lb-art{
  padding:clamp(18px,1.6vw,28px);
  background:#f5f0e8;
  box-shadow:inset 0 0 0 1px rgba(142,132,118,.16), inset 0 0 0 8px rgba(255,255,255,.48);
}
.frame-gesso::before{inset:6px;border:2px solid rgba(163,150,133,.26)}
.frame-gesso::after{inset:13px;border:1px solid rgba(195,184,166,.42)}
.frame-brass::before{inset:6px;border:1px solid rgba(82,63,21,.48);box-shadow:inset 0 0 0 1px rgba(248,231,164,.18)}
.frame-brass::after{inset:10px;border:1px solid rgba(254,242,193,.16)}
.frame-brass .lb-art{padding:clamp(12px,1vw,18px);background:#eee4cd;box-shadow:inset 0 0 0 1px rgba(96,77,27,.18), inset 0 0 0 7px rgba(243,233,205,.46)}
.frame-studio::before{inset:7px;border:2px solid rgba(84,65,51,.34)}
.frame-studio::after{inset:15px;border:1px solid rgba(255,245,236,.12)}
.frame-studio .lb-art{padding:clamp(12px,1vw,18px);background:#ece4d8;box-shadow:inset 0 0 0 1px rgba(104,82,64,.18), inset 0 0 0 8px rgba(244,234,223,.48)}

/* Match text color to wall brightness. */
.lightbox.frame-style-baroque .lb-copy,
.lightbox.frame-style-antique .lb-copy,
.lightbox.frame-style-brass .lb-copy,
.lightbox.frame-style-studio .lb-copy{color:#f0e5d5}
.lightbox.frame-style-baroque .lb-title,
.lightbox.frame-style-antique .lb-title,
.lightbox.frame-style-brass .lb-title,
.lightbox.frame-style-studio .lb-title{color:#fff5e4}
.lightbox.frame-style-baroque .lb-meta,
.lightbox.frame-style-antique .lb-meta,
.lightbox.frame-style-brass .lb-meta,
.lightbox.frame-style-studio .lb-meta{color:#cab89f}
.lightbox.frame-style-baroque .lb-text,
.lightbox.frame-style-antique .lb-text,
.lightbox.frame-style-brass .lb-text,
.lightbox.frame-style-studio .lb-text{color:#eadfce}
.lightbox.frame-style-baroque .lb-quote,
.lightbox.frame-style-antique .lb-quote,
.lightbox.frame-style-brass .lb-quote,
.lightbox.frame-style-studio .lb-quote{color:#eccb7a}
.lightbox.frame-style-baroque .lb-count,
.lightbox.frame-style-baroque .lb-close,
.lightbox.frame-style-baroque .lb-nav button,
.lightbox.frame-style-antique .lb-count,
.lightbox.frame-style-antique .lb-close,
.lightbox.frame-style-antique .lb-nav button,
.lightbox.frame-style-brass .lb-count,
.lightbox.frame-style-brass .lb-close,
.lightbox.frame-style-brass .lb-nav button,
.lightbox.frame-style-studio .lb-count,
.lightbox.frame-style-studio .lb-close,
.lightbox.frame-style-studio .lb-nav button{color:#e5d5bd}

.lightbox.frame-style-museum .lb-copy,
.lightbox.frame-style-gesso .lb-copy{color:#2c2824}
.lightbox.frame-style-museum .lb-title,
.lightbox.frame-style-gesso .lb-title{color:#171511}
.lightbox.frame-style-museum .lb-meta,
.lightbox.frame-style-gesso .lb-meta{color:#72695f}
.lightbox.frame-style-museum .lb-text,
.lightbox.frame-style-gesso .lb-text{color:#4e4740}
.lightbox.frame-style-museum .lb-quote,
.lightbox.frame-style-gesso .lb-quote{color:#8a5734}
.lightbox.frame-style-museum .lb-count,
.lightbox.frame-style-museum .lb-close,
.lightbox.frame-style-museum .lb-nav button,
.lightbox.frame-style-gesso .lb-count,
.lightbox.frame-style-gesso .lb-close,
.lightbox.frame-style-gesso .lb-nav button{color:#4f4841}

/* Monumental intro collision fix retained. */
@media(min-width:861px){
  .mode-monumental .intro-copy{max-width:min(790px,66vw)}
  .mode-monumental .intro-copy h1{font-size:clamp(52px,min(5.2vw,10.5vh),104px);line-height:.84;max-width:10.8ch}
  .mode-monumental .intro-copy p{margin-top:22px}
}
@media(min-width:861px) and (max-height:760px){
  .mode-monumental .intro-copy h1{font-size:clamp(48px,min(4.8vw,9.2vh),82px);line-height:.86}
  .mode-monumental .intro-copy::before{margin-bottom:12px}
  .mode-monumental .intro-copy p{margin-top:16px;font-size:11px;line-height:1.6;max-width:40ch}
}

@media(max-width:860px){
  .frame-card{padding:10px}
  .featured-media.frame-card{padding:10px}
}


/* =========================================================
   FRAME DEPTH + SOFT SHADOW REFINEMENT
   Stronger inner rabbet shadow, softer outer drop shadow,
   and one fixed enlarged-view gallery wall.
========================================================= */

/* One stable lightbox background only. */
.lightbox,
.lightbox.frame-style-baroque,
.lightbox.frame-style-museum,
.lightbox.frame-style-antique,
.lightbox.frame-style-gesso,
.lightbox.frame-style-brass,
.lightbox.frame-style-studio{
  background:
    radial-gradient(ellipse at 50% -4%, rgba(255,255,255,.55), transparent 34%),
    linear-gradient(180deg,#f2eee6 0%, #ece7dd 28%, #e7e1d6 100%) !important;
}
.lightbox::before{
  background:
    radial-gradient(circle at 22px 22px, rgba(210,198,178,.05) 0 2px, transparent 2.6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 70px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.07), transparent 18%);
  background-size:44px 44px, auto, auto, auto, auto;
  mix-blend-mode:soft-light;
  opacity:.86;
}
.lightbox::after{
  box-shadow:
    inset 0 0 110px rgba(72,58,42,.08),
    inset 0 -26px 60px rgba(72,58,42,.05);
}

/* Stronger frame object in the grid. */
.frame-card{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 62%, transparent),
    inset 0 -7px 14px rgba(0,0,0,.06),
    0 16px 32px rgba(28,20,12,.09),
    0 5px 10px rgba(32,23,14,.05);
}
.frame-card::before{
  inset:6px;
  border:1px solid var(--frame-line, rgba(87,62,24,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.10);
}

/* The actual artwork sits deeper inside the frame. */
.frame-card img,.frame-card video{
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.16),
    inset 0 0 0 8px rgba(247,241,228,.54),
    0 0 0 1px rgba(60,44,24,.08),
    0 -1px 0 rgba(255,255,255,.30),
    0 14px 20px -18px rgba(0,0,0,.30);
}

/* Add a clear inner-depth shadow (rabbet) between frame and artwork. */
.frame-card::after{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  box-shadow:
    inset 0 14px 18px -16px rgba(255,255,255,.16),
    inset 0 -16px 20px -16px rgba(0,0,0,.23),
    inset 12px 0 16px -16px rgba(255,255,255,.09),
    inset -12px 0 18px -16px rgba(0,0,0,.15);
}

/* Hover remains calm but keeps depth. */
.work:hover .media.frame-card,
.featured-media.frame-card:hover,
.archive-item:hover .archive-thumb.frame-card{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border) 62%, transparent),
    inset 0 -7px 14px rgba(0,0,0,.06),
    0 18px 34px rgba(24,17,10,.11),
    0 6px 12px rgba(29,21,14,.05);
}

/* Enlarged view: softer, more realistic wall shadow and much stronger frame depth. */
.lb-stage::after{
  width:min(54vw,700px);
  height:34px;
  background:rgba(12,9,6,.22);
  filter:blur(20px);
  opacity:.62;
}
.lb-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.16),
    inset 0 -8px 14px rgba(0,0,0,.10),
    0 22px 56px rgba(12,9,6,.24),
    0 8px 18px rgba(20,14,10,.08);
}
.lb-frame::before{
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.10),
    inset 0 -3px 8px rgba(0,0,0,.13);
}

/* Deeper mat and inner lip around the enlarged artwork. */
.lb-art{
  box-shadow:
    inset 0 0 0 1px rgba(96,75,42,.26),
    inset 0 0 0 8px rgba(244,238,225,.54),
    inset 0 -18px 24px -18px rgba(0,0,0,.18),
    0 0 0 1px rgba(80,62,35,.06);
}
.lb-art::before{
  border:1px solid rgba(127,98,56,.24);
}
.lb-art::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  box-shadow:
    inset 0 18px 22px -20px rgba(255,255,255,.14),
    inset 0 -20px 24px -20px rgba(0,0,0,.26),
    inset 16px 0 18px -20px rgba(255,255,255,.08),
    inset -16px 0 20px -20px rgba(0,0,0,.18);
}

/* The image itself receives a very soft recess and contact shadow. */
.lb-art img,
.lb-art video{
  box-shadow:
    0 0 0 1px rgba(48,38,27,.12),
    0 2px 5px rgba(255,255,255,.12),
    0 16px 28px -20px rgba(0,0,0,.28);
}

/* Match the copy color to the now-fixed single wall setting. */
.lightbox .lb-copy{color:#2d2924}
.lightbox .lb-title{color:#161411}
.lightbox .lb-meta{color:#766d63}
.lightbox .lb-text{color:#4f4942}
.lightbox .lb-quote{color:#8b5a35}
.lightbox .lb-count,
.lightbox .lb-close,
.lightbox .lb-nav button{color:#504943}

@media(max-width:860px){
  .frame-card{box-shadow:
    inset 0 1px 0 var(--frame-highlight),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border) 58%, transparent),
    inset 0 -5px 10px rgba(0,0,0,.05),
    0 10px 22px rgba(28,20,12,.08);}
  .lb-stage::after{
    width:min(76vw,420px);
    height:24px;
    filter:blur(16px);
  }
}


/* =========================================================
   FRAME CONSISTENCY + PORTRAIT FORMAT PRESERVATION
   The overview frames should feel closer to the enlarged view.
   Portrait works in wide/full-width slots keep a portrait frame.
========================================================= */

/* Make grid/featured/archive frames feel more like the enlarged frame. */
.frame-card{
  position:relative;
  border-width:1px;
  box-shadow:
    inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 -8px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 62%, transparent),
    0 18px 34px rgba(23,17,11,.10),
    0 6px 12px rgba(24,18,12,.05);
}
.frame-card::before{
  inset:6px;
  border:1px solid var(--frame-line, rgba(87,62,24,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -2px 5px rgba(0,0,0,.10),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-line2, rgba(255,243,209,.14)) 62%, transparent);
}
.frame-card::after{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  box-shadow:
    inset 0 18px 22px -20px rgba(255,255,255,.14),
    inset 0 -20px 24px -20px rgba(0,0,0,.26),
    inset 16px 0 18px -20px rgba(255,255,255,.07),
    inset -16px 0 20px -20px rgba(0,0,0,.18);
}
.frame-card img,.frame-card video{
  background:var(--mat-bg, #efe7d8);
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.16),
    inset 0 0 0 8px rgba(247,241,228,.56),
    0 0 0 1px rgba(56,42,24,.09),
    0 14px 20px -18px rgba(0,0,0,.28);
}

/* Featured image should look like the same object family. */
.featured-media.frame-card{
  overflow:visible;
}

/* Portrait-sensitive layout:
   When a portrait work lands in a very wide slot, the frame should keep the artwork's format
   instead of stretching across the full slot width. */
.work.feature .media.frame-card.is-portrait{
  width:min(46vw,520px);
  max-width:100%;
}
.work.feature.center .media.frame-card.is-portrait{
  margin-left:auto;
  margin-right:auto;
}
.work.feature.left .media.frame-card.is-portrait{
  margin-right:auto;
}
.work.feature.right .media.frame-card.is-portrait{
  margin-left:auto;
}

/* Do the same for the featured artwork of the day. */
.featured-media.frame-card.is-portrait{
  width:fit-content;
  max-width:min(58vw,760px);
  height:auto;
  margin:0 auto;
}
.featured-media.frame-card.is-portrait img,
.featured-media.frame-card.is-portrait video{
  width:auto;
  height:min(72vh,900px);
  max-width:min(58vw,760px);
}

/* Landscape / square featured works can still occupy the broader wall. */
.featured-media.frame-card.is-landscape,
.featured-media.frame-card.is-square{
  width:100%;
}

/* Replace the too-colorful frame family with a quieter dark walnut / smoked wood frame. */
.frame-studio{
  --frame-bg:linear-gradient(135deg,#2a1e18 0%,#5f4434 18%,#8a674f 34%,#4a3529 54%,#765844 76%,#2f231d 100%);
  --frame-border:rgba(49,34,25,.82);
  --frame-highlight:rgba(236,214,187,.16);
  --frame-inner-shadow:rgba(0,0,0,.24);
  --frame-line:rgba(98,73,54,.40);
  --frame-line2:rgba(240,228,210,.10);
  --mat-bg:#ece5d8;
}
.frame-studio::before{
  inset:6px;
  border:1px solid rgba(92,71,53,.42);
  box-shadow:inset 0 1px 0 rgba(255,244,232,.08), inset 0 -2px 4px rgba(0,0,0,.10);
}
.frame-studio::after{
  inset:12px;
  border:1px solid rgba(130,100,76,.18);
}
.frame-studio .lb-art{
  padding:clamp(12px,1vw,18px);
  background:#ece4d8;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.18),
    inset 0 0 0 8px rgba(244,234,223,.48),
    inset 0 -18px 24px -18px rgba(0,0,0,.18);
}

/* Slightly calmer wall text if this darker frame is used in the enlarged view. */
.lightbox.frame-style-studio .lb-quote{color:#e6c47f}

/* Mobile portrait cases still need natural proportions. */
@media(max-width:860px){
  .work.feature .media.frame-card.is-portrait{
    width:min(82vw,460px);
  }
  .featured-media.frame-card.is-portrait{
    max-width:min(86vw,460px);
  }
  .featured-media.frame-card.is-portrait img,
  .featured-media.frame-card.is-portrait video{
    max-width:min(86vw,460px);
    height:auto;
    max-height:62vh;
  }
}


/* =========================================================
   MASSIVE GRID FRAMES
   Bring overview frames much closer to the detail view.
========================================================= */
.media.frame-card,
.featured-media.frame-card,
.archive-thumb.frame-card{
  padding:clamp(18px,1.8vw,30px);
  box-shadow:
    inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 -10px 16px rgba(0,0,0,.10),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 68%, transparent),
    0 22px 42px rgba(23,17,11,.11),
    0 8px 16px rgba(24,18,12,.06);
}
.media.frame-card::before,
.featured-media.frame-card::before,
.archive-thumb.frame-card::before{
  inset:7px;
  border:2px solid var(--frame-line, rgba(87,62,24,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 7px rgba(0,0,0,.11),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-line2, rgba(255,243,209,.14)) 74%, transparent);
}
.media.frame-card::after,
.featured-media.frame-card::after,
.archive-thumb.frame-card::after{
  inset:9px;
  box-shadow:
    inset 0 20px 24px -22px rgba(255,255,255,.16),
    inset 0 -24px 28px -22px rgba(0,0,0,.28),
    inset 18px 0 20px -22px rgba(255,255,255,.08),
    inset -18px 0 22px -22px rgba(0,0,0,.19);
}
.media.frame-card img,.media.frame-card video,
.featured-media.frame-card img,.featured-media.frame-card video,
.archive-thumb.frame-card img,.archive-thumb.frame-card video{
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.16),
    inset 0 0 0 10px rgba(247,241,228,.58),
    0 0 0 1px rgba(56,42,24,.10),
    0 16px 24px -20px rgba(0,0,0,.30);
}
.work.feature .media.frame-card{
  padding:clamp(22px,2.1vw,34px);
}
@media(max-width:860px){
  .media.frame-card,
  .featured-media.frame-card,
  .archive-thumb.frame-card{
    padding:14px;
    box-shadow:
      inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
      inset 0 -7px 12px rgba(0,0,0,.08),
      inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 66%, transparent),
      0 14px 28px rgba(23,17,11,.10),
      0 5px 10px rgba(24,18,12,.05);
  }
  .media.frame-card::before,
  .featured-media.frame-card::before,
  .archive-thumb.frame-card::before{
    inset:5px;
    border-width:1px;
  }
  .media.frame-card::after,
  .featured-media.frame-card::after,
  .archive-thumb.frame-card::after{
    inset:6px;
  }
}


/* =========================================================
   GRID FRAME + LIGHTBOX READABILITY FIX
========================================================= */

/* 1) remove the small separator line in the detail text area */
.lb-count::after,
.lightbox .lb-count::after{
  display:none !important;
}

/* 2) one readable text palette for the current light wall */
.lightbox .lb-copy,
.lightbox.frame-style-baroque .lb-copy,
.lightbox.frame-style-museum .lb-copy,
.lightbox.frame-style-antique .lb-copy,
.lightbox.frame-style-gesso .lb-copy,
.lightbox.frame-style-brass .lb-copy,
.lightbox.frame-style-studio .lb-copy{
  color:#2b2722 !important;
}
.lightbox .lb-title,
.lightbox.frame-style-baroque .lb-title,
.lightbox.frame-style-museum .lb-title,
.lightbox.frame-style-antique .lb-title,
.lightbox.frame-style-gesso .lb-title,
.lightbox.frame-style-brass .lb-title,
.lightbox.frame-style-studio .lb-title{
  color:#181512 !important;
}
.lightbox .lb-meta,
.lightbox.frame-style-baroque .lb-meta,
.lightbox.frame-style-museum .lb-meta,
.lightbox.frame-style-antique .lb-meta,
.lightbox.frame-style-gesso .lb-meta,
.lightbox.frame-style-brass .lb-meta,
.lightbox.frame-style-studio .lb-meta{
  color:#756c63 !important;
}
.lightbox .lb-text,
.lightbox.frame-style-baroque .lb-text,
.lightbox.frame-style-museum .lb-text,
.lightbox.frame-style-antique .lb-text,
.lightbox.frame-style-gesso .lb-text,
.lightbox.frame-style-brass .lb-text,
.lightbox.frame-style-studio .lb-text{
  color:#4f4841 !important;
}
.lightbox .lb-quote,
.lightbox.frame-style-baroque .lb-quote,
.lightbox.frame-style-museum .lb-quote,
.lightbox.frame-style-antique .lb-quote,
.lightbox.frame-style-gesso .lb-quote,
.lightbox.frame-style-brass .lb-quote,
.lightbox.frame-style-studio .lb-quote{
  color:#8a5a34 !important;
}
.lightbox .lb-count,
.lightbox .lb-close,
.lightbox .lb-nav button{
  color:#5e564e !important;
}

/* 3) stronger frames + more visible shadows in the grid and archive */
.media.frame-card,
.archive-thumb.frame-card{
  padding:clamp(24px,2.15vw,38px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,229,.34),
    inset 0 -14px 18px rgba(0,0,0,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 78%, transparent),
    0 28px 44px rgba(21,16,11,.16),
    0 10px 18px rgba(21,16,11,.08) !important;
}
.media.frame-card::before,
.archive-thumb.frame-card::before{
  inset:7px !important;
  border:2px solid var(--frame-line, rgba(87,62,24,.25)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -4px 8px rgba(0,0,0,.14),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-line2, rgba(255,243,209,.14)) 84%, transparent) !important;
}
.media.frame-card::after,
.archive-thumb.frame-card::after{
  inset:9px !important;
  box-shadow:
    inset 0 22px 24px -24px rgba(255,255,255,.18),
    inset 0 -26px 30px -24px rgba(0,0,0,.30),
    inset 18px 0 20px -24px rgba(255,255,255,.08),
    inset -18px 0 22px -24px rgba(0,0,0,.22) !important;
}
.media.frame-card img,
.media.frame-card video,
.archive-thumb.frame-card img,
.archive-thumb.frame-card video{
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.20),
    inset 0 0 0 11px rgba(247,241,228,.60),
    0 0 0 1px rgba(56,42,24,.12),
    0 16px 28px -20px rgba(0,0,0,.34) !important;
}

/* make feature-sized works even more substantial */
.work.feature .media.frame-card{
  padding:clamp(28px,2.35vw,42px) !important;
}

/* 4) portrait / narrow works should keep their own proportion instead of forcing a too-wide frame */
.media.frame-card.is-portrait{
  display:inline-block !important;
  width:auto !important;
  max-width:min(100%, 620px);
}
.work.center .media.frame-card.is-portrait{
  margin-left:auto;
  margin-right:auto;
}
.work.right .media.frame-card.is-portrait{
  margin-left:auto;
}
.work.left .media.frame-card.is-portrait{
  margin-right:auto;
}
.media.frame-card.is-portrait img,
.media.frame-card.is-portrait video{
  width:auto !important;
  max-width:min(100%, 520px) !important;
  height:auto !important;
}

/* square works also look better when not over-stretched */
.media.frame-card.is-square{
  display:inline-block !important;
  width:auto !important;
  max-width:min(100%, 760px);
}
.media.frame-card.is-square img,
.media.frame-card.is-square video{
  width:auto !important;
  max-width:min(100%, 680px) !important;
  height:auto !important;
}

/* make the enlarged frame hug the art a bit more */
.lb-frame{
  width:fit-content;
  max-width:min(72vw, 1080px);
}
.lb-art{
  width:auto;
  max-width:none;
}
.lb-art img,
.lb-art video{
  width:auto;
  height:auto;
  max-width:min(62vw, 920px);
  max-height:min(68vh, 880px);
}

/* mobile */
@media(max-width:860px){
  .media.frame-card,
  .archive-thumb.frame-card{
    padding:16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,247,229,.30),
      inset 0 -10px 14px rgba(0,0,0,.10),
      inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 74%, transparent),
      0 18px 28px rgba(21,16,11,.14),
      0 7px 12px rgba(21,16,11,.07) !important;
  }
  .media.frame-card::before,
  .archive-thumb.frame-card::before{
    inset:5px !important;
    border-width:1px !important;
  }
  .media.frame-card::after,
  .archive-thumb.frame-card::after{
    inset:6px !important;
  }
  .media.frame-card.is-portrait{
    max-width:min(100%, 84vw);
  }
  .media.frame-card.is-portrait img,
  .media.frame-card.is-portrait video{
    max-width:min(100%, 74vw) !important;
  }
  .media.frame-card.is-square{
    max-width:min(100%, 86vw);
  }
  .media.frame-card.is-square img,
  .media.frame-card.is-square video{
    max-width:min(100%, 76vw) !important;
  }
}


/* =========================================================
   FINAL FRAME TUNING
   - remove the remaining line above grid captions
   - stronger, deeper grid frames
   - portrait / square grid frames fit the artwork better
   - detail view clips correctly inside frame opening
   - readable dark copy on the current light detail wall
========================================================= */

/* remove all divider rules above/below captions in the grid */
.caption{
  border-top:none !important;
  padding-top:10px !important;
}
.caption::after{
  display:none !important;
  content:none !important;
}

/* stronger caption spacing without the rule */
.caption p{margin-top:10px !important;}
.caption blockquote{margin-top:9px !important;}

/* readable lightbox copy palette for the light wall */
.lightbox .lb-copy,
.lightbox .lb-title,
.lightbox .lb-meta,
.lightbox .lb-text,
.lightbox .lb-quote,
.lightbox .lb-count,
.lightbox .lb-close,
.lightbox .lb-nav button{
  text-shadow:none !important;
}
.lightbox .lb-copy{color:#27231e !important;}
.lightbox .lb-title{color:#151210 !important;}
.lightbox .lb-meta{color:#70675d !important;}
.lightbox .lb-text{color:#4b453f !important;}
.lightbox .lb-quote{color:#8d6038 !important;}
.lightbox .lb-count,
.lightbox .lb-close,
.lightbox .lb-nav button{color:#565049 !important;}
.lb-count::after,
.lightbox .lb-count::after{
  display:none !important;
}

/* much more substantial frames and shadows in the grid */
.media.frame-card,
.archive-thumb.frame-card{
  overflow:visible !important;
  padding:clamp(30px,2.5vw,46px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,229,.36),
    inset 0 -14px 18px rgba(0,0,0,.13),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 84%, transparent),
    0 32px 54px rgba(21,16,11,.18),
    0 12px 22px rgba(21,16,11,.09) !important;
}
.media.frame-card::before,
.archive-thumb.frame-card::before{
  inset:8px !important;
  border:2px solid var(--frame-line, rgba(87,62,24,.25)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -4px 8px rgba(0,0,0,.14),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-line2, rgba(255,243,209,.14)) 88%, transparent) !important;
}
.media.frame-card::after,
.archive-thumb.frame-card::after{
  inset:10px !important;
  box-shadow:
    inset 0 24px 28px -26px rgba(255,255,255,.18),
    inset 0 -28px 34px -26px rgba(0,0,0,.32),
    inset 18px 0 22px -26px rgba(255,255,255,.08),
    inset -18px 0 22px -26px rgba(0,0,0,.22) !important;
}
.media.frame-card img,
.media.frame-card video,
.archive-thumb.frame-card img,
.archive-thumb.frame-card video{
  display:block;
  width:100% !important;
  height:auto !important;
  box-shadow:
    inset 0 0 0 1px rgba(88,70,42,.20),
    inset 0 0 0 12px rgba(247,241,228,.60),
    0 0 0 1px rgba(56,42,24,.12),
    0 18px 30px -22px rgba(0,0,0,.36) !important;
}

/* feature pieces keep the bolder frame too */
.work.feature .media.frame-card{
  padding:clamp(34px,2.8vw,54px) !important;
}

/* make narrow works keep a narrower frame in the grid */
.media.frame-card.is-portrait,
.media.frame-card.is-square,
.archive-thumb.frame-card.is-portrait,
.archive-thumb.frame-card.is-square{
  width:var(--frame-fit, auto) !important;
}
.work.center .media.frame-card.is-portrait,
.work.center .media.frame-card.is-square{
  margin-left:auto;
  margin-right:auto;
}
.work.right .media.frame-card.is-portrait,
.work.right .media.frame-card.is-square{
  margin-left:auto;
}
.work.left .media.frame-card.is-portrait,
.work.left .media.frame-card.is-square{
  margin-right:auto;
}

/* detail view: the artwork must stay inside the frame opening */
.lb-frame{
  width:fit-content;
  max-width:min(72vw,1080px);
}
.lb-art{
  position:relative;
  overflow:hidden !important;
  width:auto;
  max-width:none;
}
.lb-art img,
.lb-art video{
  display:block;
  width:auto;
  height:auto;
  max-width:min(60vw,900px);
  max-height:min(66vh,860px);
}

/* portrait / square details get a more proportionate frame */
.lb-frame.is-portrait{max-width:min(48vw,700px);}
.lb-frame.is-square{max-width:min(58vw,820px);}
.lb-art.is-portrait img,
.lb-art.is-portrait video{
  max-width:min(38vw,520px) !important;
  max-height:min(72vh,900px) !important;
}
.lb-art.is-square img,
.lb-art.is-square video{
  max-width:min(48vw,700px) !important;
  max-height:min(70vh,860px) !important;
}

@media(max-width:860px){
  .media.frame-card,
  .archive-thumb.frame-card{
    padding:16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,247,229,.32),
      inset 0 -9px 13px rgba(0,0,0,.11),
      inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 80%, transparent),
      0 20px 34px rgba(21,16,11,.16),
      0 8px 14px rgba(21,16,11,.08) !important;
  }
  .media.frame-card::before,
  .archive-thumb.frame-card::before{
    inset:5px !important;
    border-width:1px !important;
  }
  .media.frame-card::after,
  .archive-thumb.frame-card::after{
    inset:6px !important;
  }
  .lb-frame.is-portrait{max-width:min(84vw,480px);}
  .lb-frame.is-square{max-width:min(88vw,560px);}
  .lb-art.is-portrait img,
  .lb-art.is-portrait video{
    max-width:min(74vw,420px) !important;
  }
  .lb-art.is-square img,
  .lb-art.is-square video{
    max-width:min(78vw,480px) !important;
  }
}


/* =========================================================
   FRAME GEOMETRY FIX — structural, not cosmetic
   The layout container and the physical frame are now separate.
========================================================= */

/* no divider between artwork and caption */
.caption{border-top:0 !important;padding-top:0 !important;margin-top:18px !important}
.caption::after{content:none !important;display:none !important}
.mode-quiet .caption,.mode-dense .caption,.mode-monumental .caption{border-top:0 !important}

/* layout wrapper: never paints a frame */
.media{
  display:flex !important;
  align-items:flex-start;
  width:100%;
  height:auto !important;
  min-height:0;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
.work.left .media{justify-content:flex-start}
.work.center .media{justify-content:center}
.work.right .media{justify-content:flex-end}
.work.feature .media,
.mode-monumental .work.feature .media{height:auto !important}

/* the physical frame owns its geometry */
.media > .frame-card{
  --frame-pad:clamp(26px,2.2vw,42px);
  position:relative;
  box-sizing:border-box;
  flex:0 0 auto;
  display:inline-block;
  width:100%;
  max-width:100%;
  padding:var(--frame-pad) !important;
  overflow:visible !important;
  background:var(--frame-bg,linear-gradient(135deg,#8f6846,#c9a376)) !important;
  border:1px solid var(--frame-border,rgba(80,62,36,.45)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,230,.38),
    inset 0 -12px 18px rgba(0,0,0,.13),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.45)) 80%,transparent),
    0 30px 52px rgba(23,17,11,.18),
    0 10px 20px rgba(23,17,11,.08) !important;
}
.media > .frame-card::before{
  content:"";
  position:absolute;
  inset:8px !important;
  z-index:2;
  pointer-events:none;
  border:2px solid var(--frame-line,rgba(87,62,24,.35)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -4px 9px rgba(0,0,0,.14),
    inset 0 0 0 1px var(--frame-line2,rgba(255,243,209,.16)) !important;
}
.media > .frame-card::after{
  content:"";
  position:absolute;
  inset:calc(var(--frame-pad) - 3px) !important;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 22px 25px -23px rgba(255,255,255,.17),
    inset 0 -28px 32px -25px rgba(0,0,0,.31),
    inset 18px 0 20px -24px rgba(255,255,255,.08),
    inset -20px 0 24px -24px rgba(0,0,0,.23) !important;
}
.media > .frame-card > img,
.media > .frame-card > video{
  position:relative;
  z-index:1;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
  background:#f6f0e5;
  box-shadow:0 0 0 1px rgba(60,44,24,.10),0 12px 24px -18px rgba(0,0,0,.28) !important;
}
.media > .frame-card .media-mark{z-index:4}

/* actual artwork ratio decides frame width; no huge horizontal frame around portrait work */
.media > .frame-card.is-portrait{width:var(--frame-fit,64%) !important}
.media > .frame-card.is-square{width:var(--frame-fit,86%) !important}
.media > .frame-card.is-landscape{width:100% !important}
.work.feature .media > .frame-card.is-portrait{width:min(var(--frame-fit,48%),620px) !important}
.work.feature .media > .frame-card.is-square{width:min(var(--frame-fit,72%),900px) !important}

/* archive wrapper and physical frame are separate too */
.archive-thumb{
  aspect-ratio:auto !important;
  overflow:visible !important;
  background:transparent !important;
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
}
.archive-thumb > .frame-card{
  --frame-pad:14px;
  display:inline-block;
  width:100%;
  padding:var(--frame-pad) !important;
  position:relative;
  background:var(--frame-bg) !important;
  border:1px solid var(--frame-border) !important;
  box-shadow:0 14px 24px rgba(23,17,11,.13) !important;
}
.archive-thumb > .frame-card > img,
.archive-thumb > .frame-card > video{display:block;width:100% !important;height:auto !important;object-fit:contain}
.archive-thumb > .frame-card.is-portrait{width:68%}
.archive-thumb > .frame-card.is-square{width:86%}

/* DETAIL: make one self-contained physical object and clip artwork inside the rabbet */
.lb-stage{overflow:visible !important}
.lb-frame{
  --frame-depth:clamp(24px,2vw,38px);
  position:relative !important;
  box-sizing:border-box;
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  max-width:calc(100vw - clamp(310px,21vw,390px)) !important;
  max-height:calc(100vh - 96px) !important;
  padding:var(--frame-depth) !important;
  overflow:visible !important;
}
.lb-art{
  position:relative !important;
  display:inline-block !important;
  box-sizing:border-box;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:calc(100vh - 96px - (2 * var(--frame-depth))) !important;
  padding:clamp(10px,1vw,16px) !important;
  overflow:hidden !important;
  vertical-align:top;
}
.lb-art img,.lb-art video{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(60vw,860px) !important;
  max-height:calc(100vh - 148px - (2 * var(--frame-depth))) !important;
  object-fit:contain !important;
  margin:0 !important;
  transform:none !important;
}
.lb-frame.is-portrait .lb-art img,.lb-frame.is-portrait .lb-art video{
  max-width:min(38vw,520px) !important;
  max-height:min(72vh,860px) !important;
}
.lb-frame.is-square .lb-art img,.lb-frame.is-square .lb-art video{
  max-width:min(48vw,680px) !important;
  max-height:min(68vh,760px) !important;
}
/* inner lip always overlays the edge of the actual image */
.lb-art::after{
  content:"" !important;
  position:absolute !important;
  inset:clamp(10px,1vw,16px) !important;
  z-index:5 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 20px 24px -22px rgba(255,255,255,.16),
    inset 0 -24px 28px -22px rgba(0,0,0,.28),
    inset 16px 0 18px -20px rgba(255,255,255,.07),
    inset -16px 0 20px -20px rgba(0,0,0,.20) !important;
}

/* light wall copy stays dark regardless of frame family */
.lightbox .lb-copy{color:#29251f !important}
.lightbox .lb-title{color:#15120f !important}
.lightbox .lb-meta{color:#70675d !important}
.lightbox .lb-text{color:#4b453f !important}
.lightbox .lb-quote{color:#8a5c35 !important}
.lightbox .lb-count,.lightbox .lb-close,.lightbox .lb-nav button{color:#575049 !important}

@media(max-width:860px){
  .media > .frame-card{--frame-pad:16px}
  .media > .frame-card.is-portrait{width:78% !important}
  .media > .frame-card.is-square{width:92% !important}
  .work.feature .media > .frame-card.is-portrait{width:78% !important;max-width:420px}
  .lb-frame{
    --frame-depth:16px;
    max-width:92vw !important;
    max-height:none !important;
  }
  .lb-art{max-height:none !important;padding:9px !important}
  .lb-art img,.lb-art video,
  .lb-frame.is-portrait .lb-art img,.lb-frame.is-portrait .lb-art video,
  .lb-frame.is-square .lb-art img,.lb-frame.is-square .lb-art video{
    max-width:calc(92vw - 50px) !important;
    max-height:60vh !important;
  }
}


/* =========================================================
   CAPTION ALIGNMENT + HOVER CLEANUP + GRID INNER DEPTH
========================================================= */

/* Captions align to the actual physical frame, not the wider layout slot. */
.work .caption,
.work:nth-child(4n+2) .caption,
.work:nth-child(5n+3) .caption{
  width:var(--caption-frame-width,100%) !important;
  max-width:none !important;
  margin-left:var(--caption-frame-left,0px) !important;
  margin-right:0 !important;
  border-top:0 !important;
  padding-top:0 !important;
}
.work.feature .caption{
  width:var(--caption-frame-width,100%) !important;
  margin-left:var(--caption-frame-left,0px) !important;
  max-width:none !important;
}

/* No pigment wash/background may extend through the empty layout slot on hover. */
.media::after,
.work:hover .media::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
}

/* Keep hover focused on the art/type only — never on empty layout space. */
.work:hover .media{
  background:transparent !important;
  box-shadow:none !important;
}

/* A real rabbet/contact shadow over the artwork in the GRID,
   matching the depth language of the enlarged detail. */
.media > .frame-card::after{
  content:"" !important;
  position:absolute !important;
  inset:calc(var(--frame-pad) - 2px) !important;
  z-index:5 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 26px 34px -27px rgba(26,17,10,.36),
    inset 0 -20px 28px -24px rgba(20,13,8,.23),
    inset 22px 0 30px -25px rgba(26,17,10,.26),
    inset -18px 0 25px -24px rgba(20,13,8,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Slightly stronger physical contact shadow below the frame itself. */
.media > .frame-card{
  box-shadow:
    inset 0 1px 0 rgba(255,248,230,.38),
    inset 0 -12px 18px rgba(0,0,0,.13),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.45)) 80%,transparent),
    0 34px 58px rgba(23,17,11,.20),
    0 12px 22px rgba(23,17,11,.09) !important;
}

/* The artwork remains clipped under the inner shadow. */
.media > .frame-card{
  overflow:hidden !important;
}
.media > .frame-card::before{
  z-index:6 !important;
}
.media > .frame-card > img,
.media > .frame-card > video{
  z-index:1 !important;
}

/* On mobile the caption still follows the frame edge exactly. */
@media(max-width:860px){
  .work .caption,
  .work.feature .caption{
    width:var(--caption-frame-width,100%) !important;
    margin-left:var(--caption-frame-left,0px) !important;
  }
  .media > .frame-card::after{
    box-shadow:
      inset 0 18px 24px -20px rgba(26,17,10,.32),
      inset 0 -15px 20px -18px rgba(20,13,8,.20),
      inset 15px 0 20px -18px rgba(26,17,10,.22),
      inset -12px 0 18px -17px rgba(20,13,8,.15) !important;
  }
}


/* =========================================================
   MOBILE DETAIL — FULL ARTWORK + COPY BELOW
   On phones the framed artwork is never cropped by a fixed
   viewport-height container. The whole lightbox scrolls vertically.
========================================================= */
@media(max-width:860px){
  .lightbox.open{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    height:100dvh;
    padding:0 18px 24px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }

  /*
     The media area is content-height now.
     Stages share one grid cell, so the old left/right transition
     can still animate two frames without stacking them vertically.
  */
  .lb-media{
    order:1 !important;
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100vw !important;
    height:auto !important;
    min-height:0 !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
    overflow:visible !important;
    touch-action:pan-y;
  }

  .lb-stage{
    position:relative !important;
    inset:auto !important;
    grid-area:1 / 1 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    box-sizing:border-box;
    padding:72px 14px 30px !important;
    display:grid !important;
    place-items:center !important;
  }

  /* No fixed-height clipping from the older mobile rules. */
  .lb-frame,
  .lb-frame.is-portrait,
  .lb-frame.is-square{
    --frame-depth:16px;
    width:fit-content !important;
    height:auto !important;
    max-width:calc(100vw - 28px) !important;
    max-height:none !important;
  }

  .lb-art,
  .lb-art.is-portrait,
  .lb-art.is-square{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:9px !important;
  }

  .lb-art img,
  .lb-art video,
  .lb-frame.is-portrait .lb-art img,
  .lb-frame.is-portrait .lb-art video,
  .lb-frame.is-square .lb-art img,
  .lb-frame.is-square .lb-art video{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  /*
     Caption is normal document flow below the complete frame.
     The user can simply scroll down when they want the metadata.
  */
  .lb-copy{
    order:2 !important;
    position:relative !important;
    align-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    padding:26px 0 20px !important;
    margin:0 !important;
    z-index:8;
  }
  .lb-title,
  .mode-dense .lb-title,
  .mode-monumental .lb-title{
    max-width:10.5ch !important;
  }
  .lb-text{max-width:42ch}
  .lb-quote{max-width:32ch}

  .lb-nav{
    order:3 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    padding:10px 0 34px !important;
  }

  .lb-close{
    position:fixed !important;
    top:max(10px,env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:30 !important;
  }

  /* keep the horizontal off-screen travel for swipe/navigation */
  .lb-stage.frame-exit-left{transform:translate3d(-145vw,0,0) rotate(-.85deg) !important}
  .lb-stage.frame-exit-right{transform:translate3d(145vw,0,0) rotate(.85deg) !important}
  .lb-stage.frame-enter-right{transform:translate3d(145vw,0,0) rotate(.75deg) !important}
  .lb-stage.frame-enter-left{transform:translate3d(-145vw,0,0) rotate(-.75deg) !important}
}

/* Override the old short-screen rule: short phones should scroll, not crop. */
@media(max-width:860px) and (max-height:700px){
  .lb-media{
    height:auto !important;
    min-height:0 !important;
  }
  .lb-frame,
  .lb-art,
  .lb-art img,
  .lb-art video{
    max-height:none !important;
  }
}


/* =========================================================
   MOBILE DETAIL — UNIFIED BACKGROUND
   Removes the visible tone band below the title/copy.
========================================================= */
@media(max-width:860px){
  .lightbox,
  .lightbox.frame-style-baroque,
  .lightbox.frame-style-museum,
  .lightbox.frame-style-antique,
  .lightbox.frame-style-gesso,
  .lightbox.frame-style-brass,
  .lightbox.frame-style-studio{
    background:#eee8de !important;
  }

  /* The old wall overlays were viewport-height pseudo layers.
     On a vertically scrolling detail they could create a visible
     horizontal change of tone. Mobile now uses one continuous surface. */
  .lightbox::before,
  .lightbox::after{
    display:none !important;
    content:none !important;
  }

  .lb-media,
  .lb-stage,
  .lb-copy,
  .lb-nav{
    background:transparent !important;
  }

  .lb-copy::before,
  .lb-copy::after,
  .lb-nav::before,
  .lb-nav::after{
    display:none !important;
    content:none !important;
  }
}


/* =========================================================
   RASTER-SAFE FRAME OPENING
   One explicit opening owns the artwork geometry. This keeps
   JPG/PNG/WebP photos and SVGs centered identically.
========================================================= */

/* Physical frame stays outside; only the opening clips artwork. */
.media > .frame-card,
.archive-thumb > .frame-card{
  overflow:visible !important;
  height:auto !important;
}

/* Old pseudo inner-shadow was attached to the whole frame.
   Disable it: depth now belongs exactly to the frame opening. */
.media > .frame-card::after,
.archive-thumb > .frame-card::after{
  content:none !important;
  display:none !important;
}

/* The opening gets the TRUE decoded artwork aspect ratio from JS. */
.frame-opening{
  --art-ratio:4 / 3;
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:var(--art-ratio);
  overflow:hidden;
  background:#f6f0e5;
  box-shadow:
    0 0 0 1px rgba(58,43,25,.13),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Raster and vector artwork use exactly the same box model. */
.frame-opening > img,
.frame-opening > video{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  image-orientation:from-image;
  background:transparent !important;
  box-shadow:none !important;
  transform:none;
}

/* Inner rabbet shadow: intentionally falls ONTO the artwork,
   but cannot spill outside the opening. */
.frame-opening::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 24px 30px -25px rgba(24,16,10,.34),
    inset 0 -23px 30px -25px rgba(20,13,8,.24),
    inset 20px 0 26px -23px rgba(23,15,9,.24),
    inset -18px 0 24px -23px rgba(20,13,8,.18),
    inset 0 0 0 1px rgba(46,34,20,.12);
}

/* A tiny inner highlight makes the frame opening feel cut/recessed. */
.frame-opening::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 1px 0 0 rgba(255,255,255,.08);
}

/* PLAY tag must live inside the actual image opening. */
.frame-opening .media-mark{
  z-index:5 !important;
}

/* The old direct-image rules must not affect nested real photos. */
.media > .frame-card > img,
.media > .frame-card > video,
.archive-thumb > .frame-card > img,
.archive-thumb > .frame-card > video{
  display:none !important;
}

/* Frame width is separate from image fitting.
   Real photo dimensions only decide this physical frame width. */
.media > .frame-card.is-landscape{width:100% !important;}
.media > .frame-card.is-square{width:var(--frame-fit,86%) !important;}
.media > .frame-card.is-portrait{width:var(--frame-fit,66%) !important;}

.work.feature .media > .frame-card.is-landscape{width:100% !important;}
.work.feature .media > .frame-card.is-square{width:min(var(--frame-fit,78%),920px) !important;}
.work.feature .media > .frame-card.is-portrait{width:min(var(--frame-fit,58%),650px) !important;}

/* Caption remains tied to the physical frame measured by JS. */
.work .caption{
  box-sizing:border-box;
}

/* Lightbox raster safety as well. */
.lb-art{
  overflow:hidden !important;
}
.lb-art img,
.lb-art video{
  object-fit:contain !important;
  object-position:50% 50% !important;
  image-orientation:from-image;
  margin:0 !important;
  padding:0 !important;
  vertical-align:top;
}

/* Mobile keeps the same geometry; only the frame width changes. */
@media(max-width:860px){
  .media > .frame-card.is-portrait{width:80% !important;}
  .media > .frame-card.is-square{width:94% !important;}
  .frame-opening::after{
    box-shadow:
      inset 0 17px 23px -19px rgba(24,16,10,.31),
      inset 0 -17px 23px -20px rgba(20,13,8,.21),
      inset 14px 0 19px -17px rgba(23,15,9,.21),
      inset -13px 0 18px -17px rgba(20,13,8,.15),
      inset 0 0 0 1px rgba(46,34,20,.11);
  }
}


/* =========================================================
   SERVER-AWARE PHOTO GEOMETRY
   JPEG EXIF orientation is resolved by PHP before first paint.
========================================================= */
.frame-opening{
  aspect-ratio:var(--art-ratio, 4 / 3) !important;
}

/* Physical frame width follows the actual displayed photo orientation. */
.media > .frame-card.is-portrait{
  width:var(--frame-fit,66%) !important;
  max-width:100% !important;
}
.media > .frame-card.is-square{
  width:var(--frame-fit,88%) !important;
  max-width:100% !important;
}
.media > .frame-card.is-landscape{
  width:100% !important;
}

/* Center the physical object within its editorial slot unless the work asks for an edge. */
.work.center .media > .frame-card{
  margin-left:auto !important;
  margin-right:auto !important;
}
.work.right .media > .frame-card{
  margin-left:auto !important;
  margin-right:0 !important;
}
.work.left .media > .frame-card{
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Feature-sized portrait works must stay portrait too. */
.work.feature .media > .frame-card.is-portrait{
  width:min(var(--frame-fit,66%),680px) !important;
}
.work.feature .media > .frame-card.is-square{
  width:min(var(--frame-fit,88%),900px) !important;
}

/* Archive uses the same aspect logic. */
.archive-thumb > .frame-card.is-portrait{width:var(--frame-fit,66%) !important;}
.archive-thumb > .frame-card.is-square{width:var(--frame-fit,88%) !important;}
.archive-thumb > .frame-card.is-landscape{width:100% !important;}

/* No letterboxed side fields inside a correctly proportioned frame opening. */
.frame-opening > img,
.frame-opening > video{
  object-fit:fill !important;
}

/* For real photos this is safe because the opening has the exact decoded/display ratio.
   SVG/video fallback JS supplies the ratio when PHP cannot. */

@media(max-width:860px){
  .media > .frame-card.is-portrait{width:min(var(--frame-fit,72%),82%) !important;}
  .media > .frame-card.is-square{width:min(var(--frame-fit,90%),94%) !important;}
}


/* =========================================================
   FINAL FRAME RATIO FIX
   The artwork itself determines the opening height in normal
   document flow. No absolute-positioned image / forced aspect box.
========================================================= */

/* physical frame */
.media > .frame-card,
.archive-thumb > .frame-card{
  height:auto !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
}

/* opening follows the actual rendered image */
.frame-opening{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  line-height:0;
  background:#f6f0e5;
}

/* crucial: image participates in layout and sets the opening height */
.frame-opening > img,
.frame-opening > video{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  aspect-ratio:auto !important;
  transform:none !important;
  vertical-align:top !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* no fake side fields / forced fill */
.frame-opening > img,
.frame-opening > video{
  object-fit:contain !important;
}

/* the inner shadow remains an overlay inside the exact image opening */
.frame-opening::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 24px 30px -25px rgba(24,16,10,.34),
    inset 0 -23px 30px -25px rgba(20,13,8,.24),
    inset 20px 0 26px -23px rgba(23,15,9,.24),
    inset -18px 0 24px -23px rgba(20,13,8,.18),
    inset 0 0 0 1px rgba(46,34,20,.12) !important;
}

/* Overall size inside editorial slot; shape is still defined by the image. */
.media > .frame-card.is-landscape{width:100% !important;}
.media > .frame-card.is-square{width:var(--frame-fit,88%) !important;}
.media > .frame-card.is-portrait{width:var(--frame-fit,66%) !important;}

.work.feature .media > .frame-card.is-landscape{width:100% !important;}
.work.feature .media > .frame-card.is-square{width:min(var(--frame-fit,88%),900px) !important;}
.work.feature .media > .frame-card.is-portrait{width:min(var(--frame-fit,66%),680px) !important;}

/* direct old image rules can no longer distort nested artwork */
.media > .frame-card > img,
.media > .frame-card > video,
.archive-thumb > .frame-card > img,
.archive-thumb > .frame-card > video{
  display:none !important;
}

/* The slot itself never dictates a frame height. */
.media,
.work.feature .media,
.mode-monumental .work.feature .media{
  height:auto !important;
  min-height:0 !important;
}

/* keep caption measured against the actual outer frame */
.work .caption{
  width:var(--caption-frame-width,100%) !important;
  margin-left:var(--caption-frame-left,0px) !important;
}

@media(max-width:860px){
  .media > .frame-card.is-portrait{width:min(var(--frame-fit,72%),82%) !important;}
  .media > .frame-card.is-square{width:min(var(--frame-fit,90%),94%) !important;}
}


/* =========================================================
   CAPTION / FRAME LOCK
   Caption follows the measured physical frame, never the layout slot.
========================================================= */
.work .caption,
.work:nth-child(4n+2) .caption,
.work:nth-child(5n+3) .caption,
.work.feature .caption{
  box-sizing:border-box !important;
  width:var(--caption-frame-width,100%) !important;
  margin-left:var(--caption-frame-left,0px) !important;
  margin-right:0 !important;
  transform:none !important;
}

/* =========================================================
   PRODUCTION REFACTOR ADDITIONS
========================================================= */
.work-link,
.archive-item,
.site-logo-link{
  color:inherit;
  text-decoration:none;
}
.work-link{
  display:block;
}
.archive-item{
  display:block;
}
.single-work-page{
  min-height:100vh;
  padding:var(--pad);
}
.single-work-top{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-start;
  margin-bottom:clamp(56px,7vw,110px);
}
.single-work-top .logo{
  width:min(210px,22vw);
}
.single-work-back{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding-top:8px;
}
.single-work-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:clamp(34px,5vw,90px);
  align-items:center;
}
.single-work-art{
  min-width:0;
  display:grid;
  place-items:center;
}
.single-work-frame{
  position:relative;
  width:fit-content;
  max-width:min(72vw,1080px);
  padding:clamp(22px,2.2vw,38px);
}
.single-work-frame .frame-opening{
  max-width:min(62vw,900px);
}
.single-work-frame .frame-opening img,
.single-work-frame .frame-opening video{
  display:block;
  width:auto;
  height:auto;
  max-width:min(62vw,900px);
  max-height:76vh;
  object-fit:contain;
}
.single-work-copy{
  max-width:300px;
}
.single-work-copy .lb-title{
  margin-bottom:18px;
}
.single-work-copy .lb-meta{
  margin-bottom:20px;
}
.single-work-copy .lb-text{
  margin-bottom:20px;
}
.single-work-copy .lb-quote{
  margin:0;
}
.single-work-number{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:34px;
}
.production-note{
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
@media(max-width:860px){
  .single-work-page{padding:18px}
  .single-work-top{margin-bottom:44px}
  .single-work-top .logo{width:min(180px,48vw)}
  .single-work-layout{
    display:block;
  }
  .single-work-frame{
    max-width:100%;
    margin:0 auto;
    padding:16px;
  }
  .single-work-frame .frame-opening{
    max-width:100%;
  }
  .single-work-frame .frame-opening img,
  .single-work-frame .frame-opening video{
    max-width:100%;
    max-height:none;
  }
  .single-work-copy{
    max-width:none;
    padding:38px 0 50px;
  }
}


/* =========================================================
   GRID / DETAIL FRAME DEPTH PARITY
   The exhibition grid now uses the same physical depth recipe
   as the enlarged artwork: 24–38px outer moulding + 10–16px
   recessed inner mount. Mobile: 16px + 9px.
========================================================= */

/* Same outer moulding thickness as .lb-frame. */
.media > .frame-card{
  --frame-pad:clamp(24px,2vw,38px) !important;
  padding:var(--frame-pad) !important;
}

/*
   Detail view has .lb-art inside .lb-frame.
   The grid's .frame-opening now plays that same role.
*/
.media > .frame-card > .frame-opening{
  --grid-mat-depth:clamp(10px,1vw,16px);
  box-sizing:border-box !important;
  padding:var(--grid-mat-depth) !important;
}

/* Match the inner mount material of each detail-frame family. */
.media > .frame-baroque > .frame-opening{
  background:#e8dfcd !important;
  box-shadow:
    inset 0 0 0 1px rgba(112,88,52,.36),
    inset 0 0 0 8px rgba(246,239,223,.62),
    inset 0 0 20px rgba(89,63,26,.12) !important;
}
.media > .frame-museum > .frame-opening{
  background:#f2eee5 !important;
  box-shadow:inset 0 0 0 1px rgba(95,83,68,.18) !important;
}
.media > .frame-antique > .frame-opening{
  background:#30291f !important;
  box-shadow:
    inset 0 0 0 1px rgba(197,157,91,.28),
    inset 0 0 0 7px rgba(34,28,22,.82) !important;
}
.media > .frame-gesso > .frame-opening{
  background:#f5f0e8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(142,132,118,.16),
    inset 0 0 0 8px rgba(255,255,255,.48) !important;
}
.media > .frame-brass > .frame-opening{
  background:#eee4cd !important;
  box-shadow:
    inset 0 0 0 1px rgba(96,77,27,.18),
    inset 0 0 0 7px rgba(243,233,205,.46) !important;
}
.media > .frame-studio > .frame-opening{
  background:#ece4d8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.18),
    inset 0 0 0 8px rgba(244,234,223,.48) !important;
}

/*
   Rabbet shadow must begin at the artwork edge, not at the outer
   edge of the inner mount.
*/
.media > .frame-card > .frame-opening::after,
.media > .frame-card > .frame-opening::before{
  inset:var(--grid-mat-depth) !important;
}

/* Keep the artwork itself flush inside the recessed opening. */
.media > .frame-card > .frame-opening > img,
.media > .frame-card > .frame-opening > video{
  width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
}

/* Same mobile physical thickness as the enlarged mobile detail. */
@media(max-width:860px){
  .media > .frame-card{
    --frame-pad:16px !important;
    padding:var(--frame-pad) !important;
  }
  .media > .frame-card > .frame-opening{
    --grid-mat-depth:9px;
    padding:var(--grid-mat-depth) !important;
  }
}



/* =========================================================
   EXACT GRID / DETAIL FRAME MATCH
   Grid frames reuse the same physical thickness, moulding
   profile and soft wall shadow as the enlarged detail.
========================================================= */

/*
   DESKTOP
   Use the actual --frame-depth defined by each frame family:
   baroque 28–42px, museum 12–18px, antique 24–34px;
   gesso/brass/studio fall back to the detail default 30px.
*/
.media > .frame-card{
  padding:var(--frame-depth,30px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.16),
    inset 0 -8px 14px rgba(0,0,0,.10),
    0 22px 56px rgba(12,9,6,.24),
    0 8px 18px rgba(20,14,10,.08) !important;
}

/* Restore the same decorative moulding layers used by detail frames. */
.media > .frame-card.frame-baroque::before{
  content:"" !important;
  display:block !important;
  inset:7px !important;
  border:3px ridge rgba(233,203,124,.72) !important;
  box-shadow:
    inset 0 0 0 5px rgba(89,54,9,.36),
    inset 0 0 0 7px rgba(244,218,150,.20) !important;
}
.media > .frame-card.frame-baroque::after{
  content:"" !important;
  display:block !important;
  inset:15px !important;
  border:2px solid rgba(82,51,12,.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(250,229,168,.46),
    inset 0 0 16px rgba(73,42,6,.30) !important;
}

.media > .frame-card.frame-museum::before{
  content:"" !important;
  display:block !important;
  inset:5px !important;
  border:1px solid rgba(69,47,29,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.10),
    inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.media > .frame-card.frame-museum::after{
  content:none !important;
  display:none !important;
}

.media > .frame-card.frame-antique::before{
  content:"" !important;
  display:block !important;
  inset:7px !important;
  border:3px double rgba(173,128,56,.62) !important;
  box-shadow:
    inset 0 0 0 4px rgba(8,6,4,.55),
    inset 0 0 0 5px rgba(188,143,66,.22) !important;
}
.media > .frame-card.frame-antique::after{
  content:"" !important;
  display:block !important;
  inset:14px !important;
  border:1px solid rgba(205,157,75,.55) !important;
  box-shadow:none !important;
}

.media > .frame-card.frame-gesso::before{
  content:"" !important;
  display:block !important;
  inset:6px !important;
  border:2px solid rgba(163,150,133,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.10),
    inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.media > .frame-card.frame-gesso::after{
  content:"" !important;
  display:block !important;
  inset:13px !important;
  border:1px solid rgba(195,184,166,.42) !important;
  box-shadow:none !important;
}

.media > .frame-card.frame-brass::before{
  content:"" !important;
  display:block !important;
  inset:6px !important;
  border:1px solid rgba(82,63,21,.48) !important;
  box-shadow:inset 0 0 0 1px rgba(248,231,164,.18) !important;
}
.media > .frame-card.frame-brass::after{
  content:"" !important;
  display:block !important;
  inset:10px !important;
  border:1px solid rgba(254,242,193,.16) !important;
  box-shadow:none !important;
}

.media > .frame-card.frame-studio::before{
  content:"" !important;
  display:block !important;
  inset:7px !important;
  border:2px solid rgba(84,65,51,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.10),
    inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.media > .frame-card.frame-studio::after{
  content:"" !important;
  display:block !important;
  inset:15px !important;
  border:1px solid rgba(255,245,236,.12) !important;
  box-shadow:none !important;
}

/*
   INNER MOUNT / MAT
   These values are copied from the matching .lb-art styles.
*/
.media > .frame-baroque > .frame-opening{
  padding:clamp(11px,1vw,16px) !important;
  background:#e8dfcd !important;
  box-shadow:
    inset 0 0 0 1px rgba(112,88,52,.36),
    inset 0 0 0 8px rgba(246,239,223,.62),
    inset 0 0 20px rgba(89,63,26,.12) !important;
}
.media > .frame-museum > .frame-opening{
  padding:clamp(24px,2vw,34px) !important;
  background:#f2eee5 !important;
  box-shadow:inset 0 0 0 1px rgba(95,83,68,.18) !important;
}
.media > .frame-antique > .frame-opening{
  padding:clamp(10px,.9vw,15px) !important;
  background:#30291f !important;
  box-shadow:
    inset 0 0 0 1px rgba(197,157,91,.28),
    inset 0 0 0 7px rgba(34,28,22,.82) !important;
}
.media > .frame-gesso > .frame-opening{
  padding:clamp(18px,1.6vw,28px) !important;
  background:#f5f0e8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(142,132,118,.16),
    inset 0 0 0 8px rgba(255,255,255,.48) !important;
}
.media > .frame-brass > .frame-opening{
  padding:clamp(12px,1vw,18px) !important;
  background:#eee4cd !important;
  box-shadow:
    inset 0 0 0 1px rgba(96,77,27,.18),
    inset 0 0 0 7px rgba(243,233,205,.46) !important;
}
.media > .frame-studio > .frame-opening{
  padding:clamp(12px,1vw,18px) !important;
  background:#ece4d8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.18),
    inset 0 0 0 8px rgba(244,234,223,.48) !important;
}

/* Keep the inner depth shadow aligned to the actual artwork edge. */
.media > .frame-card > .frame-opening::before,
.media > .frame-card > .frame-opening::after{
  inset:var(--grid-art-inset,0px) !important;
}

/* Strong wall-contact shadow directly below the frame, same softness as detail. */
.media > .frame-card{
  filter:drop-shadow(0 18px 22px rgba(20,14,10,.055));
}

/*
   MOBILE
   Detail uses a fixed 16px outer moulding + 9px recessed mount.
   Grid now does exactly the same regardless of frame family.
*/
@media(max-width:860px){
  .media > .frame-card{
    padding:16px !important;
    filter:drop-shadow(0 12px 16px rgba(20,14,10,.06));
    box-shadow:
      inset 0 1px 0 rgba(255,244,214,.16),
      inset 0 -8px 14px rgba(0,0,0,.10),
      0 22px 56px rgba(12,9,6,.22),
      0 8px 18px rgba(20,14,10,.07) !important;
  }

  .media > .frame-card > .frame-opening{
    padding:9px !important;
  }
}



/* =========================================================
   CANONICAL SHARED ART FRAME COMPONENT
   Grid, archive, standalone work and lightbox now use the same
   .art-frame / .art-frame__mount structure and one shadow recipe.
========================================================= */

/* Remove the separate blurred ellipse below the lightbox frame.
   This was the shadow that read like a shadow cast onto a floor. */
.lb-stage::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
}

/* One physical frame object everywhere. */
.art-frame{
  --frame-depth:clamp(24px,2vw,38px);
  --mount-depth:clamp(10px,1vw,16px);
  position:relative !important;
  box-sizing:border-box !important;
  display:inline-block !important;
  height:auto !important;
  padding:var(--frame-depth) !important;
  overflow:visible !important;
  filter:none !important;
  border:1px solid var(--frame-border,rgba(80,62,36,.42)) !important;
  background:var(--frame-bg,linear-gradient(135deg,#c9b08a,#a27d56)) !important;

  /* This is the wall shadow the detail already had and the user liked.
     It is now identical in the grid and detail. */
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.18)),
    inset 0 -8px 14px rgba(0,0,0,.10),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),
    0 22px 56px rgba(12,9,6,.24),
    0 8px 18px rgba(20,14,10,.08) !important;
}

/* Hover never changes the physical depth/shadow. */
.work:hover .art-frame,
.archive-item:hover .art-frame,
.art-frame:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.18)),
    inset 0 -8px 14px rgba(0,0,0,.10),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),
    0 22px 56px rgba(12,9,6,.24),
    0 8px 18px rgba(20,14,10,.08) !important;
}

/* The frame profiles use the frame's pseudo-elements everywhere. */
.art-frame::before,
.art-frame::after{
  content:"" !important;
  position:absolute !important;
  pointer-events:none !important;
  z-index:4 !important;
}

/* 01 Baroque */
.art-frame.frame-baroque::before{
  inset:7px !important;
  border:3px ridge rgba(233,203,124,.72) !important;
  box-shadow:
    inset 0 0 0 5px rgba(89,54,9,.36),
    inset 0 0 0 7px rgba(244,218,150,.20) !important;
}
.art-frame.frame-baroque::after{
  inset:15px !important;
  border:2px solid rgba(82,51,12,.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(250,229,168,.46),
    inset 0 0 16px rgba(73,42,6,.30) !important;
}

/* 02 Museum */
.art-frame.frame-museum::before{
  inset:5px !important;
  border:1px solid rgba(69,47,29,.38) !important;
  box-shadow:inset 0 1px 0 rgba(255,247,223,.10),inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.art-frame.frame-museum::after{display:none !important;content:none !important;}

/* 03 Antique */
.art-frame.frame-antique::before{
  inset:7px !important;
  border:3px double rgba(173,128,56,.62) !important;
  box-shadow:inset 0 0 0 4px rgba(8,6,4,.55),inset 0 0 0 5px rgba(188,143,66,.22) !important;
}
.art-frame.frame-antique::after{
  inset:14px !important;
  border:1px solid rgba(205,157,75,.55) !important;
  box-shadow:none !important;
}

/* 04 White gesso */
.art-frame.frame-gesso::before{
  inset:6px !important;
  border:2px solid rgba(163,150,133,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,247,223,.10),inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.art-frame.frame-gesso::after{
  inset:13px !important;
  border:1px solid rgba(195,184,166,.42) !important;
  box-shadow:none !important;
}

/* 05 Brass */
.art-frame.frame-brass::before{
  inset:6px !important;
  border:1px solid rgba(82,63,21,.48) !important;
  box-shadow:inset 0 0 0 1px rgba(248,231,164,.18) !important;
}
.art-frame.frame-brass::after{
  inset:10px !important;
  border:1px solid rgba(254,242,193,.16) !important;
  box-shadow:none !important;
}

/* 06 Quiet studio wood */
.art-frame.frame-studio::before{
  inset:7px !important;
  border:2px solid rgba(84,65,51,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,247,223,.10),inset 0 -3px 8px rgba(0,0,0,.13) !important;
}
.art-frame.frame-studio::after{
  inset:15px !important;
  border:1px solid rgba(255,245,236,.12) !important;
  box-shadow:none !important;
}

/* One shared recessed mount. Family differences are variables only. */
.art-frame__mount{
  --mount-bg:#eee7dc;
  position:relative !important;
  z-index:3 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:var(--mount-depth) !important;
  overflow:hidden !important;
  background:var(--mount-bg) !important;
  line-height:0 !important;
  vertical-align:top !important;
}

.art-frame.frame-baroque > .art-frame__mount{
  --mount-depth:clamp(11px,1vw,16px);
  --mount-bg:#e8dfcd;
  box-shadow:inset 0 0 0 1px rgba(112,88,52,.36),inset 0 0 0 8px rgba(246,239,223,.62),inset 0 0 20px rgba(89,63,26,.12) !important;
}
.art-frame.frame-museum > .art-frame__mount{
  --mount-depth:clamp(24px,2vw,34px);
  --mount-bg:#f2eee5;
  box-shadow:inset 0 0 0 1px rgba(95,83,68,.18) !important;
}
.art-frame.frame-antique > .art-frame__mount{
  --mount-depth:clamp(10px,.9vw,15px);
  --mount-bg:#30291f;
  box-shadow:inset 0 0 0 1px rgba(197,157,91,.28),inset 0 0 0 7px rgba(34,28,22,.82) !important;
}
.art-frame.frame-gesso > .art-frame__mount{
  --mount-depth:clamp(18px,1.6vw,28px);
  --mount-bg:#f5f0e8;
  box-shadow:inset 0 0 0 1px rgba(142,132,118,.16),inset 0 0 0 8px rgba(255,255,255,.48) !important;
}
.art-frame.frame-brass > .art-frame__mount{
  --mount-depth:clamp(12px,1vw,18px);
  --mount-bg:#eee4cd;
  box-shadow:inset 0 0 0 1px rgba(96,77,27,.18),inset 0 0 0 7px rgba(243,233,205,.46) !important;
}
.art-frame.frame-studio > .art-frame__mount{
  --mount-depth:clamp(12px,1vw,18px);
  --mount-bg:#ece4d8;
  box-shadow:inset 0 0 0 1px rgba(104,82,64,.18),inset 0 0 0 8px rgba(244,234,223,.48) !important;
}

/* Shared rabbet: the shadow falls on the artwork, not outside the frame. */
.art-frame__mount::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:var(--mount-depth) !important;
  z-index:6 !important;
  pointer-events:none !important;
  border:0 !important;
  box-shadow:
    inset 0 20px 24px -22px rgba(255,255,255,.16),
    inset 0 -24px 28px -22px rgba(0,0,0,.28),
    inset 16px 0 18px -20px rgba(255,255,255,.07),
    inset -16px 0 20px -20px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(48,38,27,.10) !important;
}

.art-frame__mount > img,
.art-frame__mount > video{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  object-fit:contain !important;
  box-shadow:0 0 0 1px rgba(48,38,27,.10) !important;
}

/* PHP grid/archive media set the image width; detail keeps its own max sizing. */
.frame-context-grid > .art-frame__mount > img,
.frame-context-grid > .art-frame__mount > video,
.frame-context-archive > .art-frame__mount > img,
.frame-context-archive > .art-frame__mount > video{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
}

/* Same decorative baroque corner component in grid + detail. */
.art-frame__ornament{
  display:none;
  position:absolute;
  width:calc(var(--frame-depth) * 1.85);
  height:calc(var(--frame-depth) * 1.85);
  z-index:7;
  pointer-events:none;
}
.frame-baroque > .art-frame__ornament{display:block;}
.art-frame__ornament::before,
.art-frame__ornament::after{content:"";position:absolute;}
.art-frame__ornament::before{
  inset:0;
  background:
    radial-gradient(ellipse at 18% 18%,#f4dda0 0 8%,transparent 9%),
    radial-gradient(ellipse at 44% 22%,#c49232 0 9%,transparent 10%),
    radial-gradient(ellipse at 24% 48%,#e8c469 0 12%,transparent 13%),
    radial-gradient(ellipse at 58% 52%,#8a5714 0 7%,transparent 8%),
    conic-gradient(from 232deg at 27% 27%,#f5dfa0 0 14%,#9a671c 14% 26%,#d3a544 26% 39%,#6d420d 39% 47%,transparent 47%);
  filter:drop-shadow(0 1px 1px rgba(60,35,8,.5));
}
.art-frame__ornament::after{
  width:63%;height:20%;left:26%;top:57%;border-radius:50%;
  background:linear-gradient(90deg,#805014,#efce7d,#8b5917);
  transform:rotate(-38deg);opacity:.8;
}
.art-frame__ornament.tl{top:calc(var(--frame-depth) * -.5);left:calc(var(--frame-depth) * -.5)}
.art-frame__ornament.tr{top:calc(var(--frame-depth) * -.5);right:calc(var(--frame-depth) * -.5);transform:scaleX(-1)}
.art-frame__ornament.bl{bottom:calc(var(--frame-depth) * -.5);left:calc(var(--frame-depth) * -.5);transform:scaleY(-1)}
.art-frame__ornament.br{bottom:calc(var(--frame-depth) * -.5);right:calc(var(--frame-depth) * -.5);transform:scale(-1)}

/* Grid geometry only controls overall artwork size/alignment, not frame construction. */
.media > .work-link > .art-frame.is-landscape{width:100% !important;}
.media > .work-link > .art-frame.is-square{width:var(--frame-fit,88%) !important;}
.media > .work-link > .art-frame.is-portrait{width:var(--frame-fit,66%) !important;}
.work.center .media > .work-link{display:flex;justify-content:center;}
.work.right .media > .work-link{display:flex;justify-content:flex-end;}
.work.left .media > .work-link{display:flex;justify-content:flex-start;}
.work.feature .media > .work-link > .art-frame.is-portrait{width:min(var(--frame-fit,66%),680px) !important;}
.work.feature .media > .work-link > .art-frame.is-square{width:min(var(--frame-fit,88%),900px) !important;}

/* Dedicated work page uses the same physical component but its own artwork size constraint. */
.single-work-frame{width:fit-content !important;max-width:min(72vw,1080px) !important;}
.single-work-frame > .art-frame__mount{width:auto !important;max-width:min(62vw,900px) !important;}
.single-work-frame > .art-frame__mount > img,
.single-work-frame > .art-frame__mount > video{
  width:auto !important;height:auto !important;max-width:min(62vw,900px) !important;max-height:76vh !important;
}

/* Lightbox sizing only scales the shared component. It does not restyle it. */
.lb-frame.art-frame{
  width:auto !important;
  max-width:calc(100vw - clamp(310px,21vw,390px)) !important;
  max-height:calc(100vh - 96px) !important;
}
.lb-frame.art-frame > .art-frame__mount{
  width:auto !important;
  max-width:100% !important;
  max-height:calc(100vh - 96px - (2 * var(--frame-depth))) !important;
}
.lb-frame.art-frame > .art-frame__mount > img,
.lb-frame.art-frame > .art-frame__mount > video{
  width:auto !important;
  height:auto !important;
  max-width:min(60vw,860px) !important;
  max-height:calc(100vh - 148px - (2 * var(--frame-depth))) !important;
}
.lb-frame.art-frame.is-portrait > .art-frame__mount > img,
.lb-frame.art-frame.is-portrait > .art-frame__mount > video{max-width:min(38vw,520px) !important;max-height:min(72vh,860px) !important;}
.lb-frame.art-frame.is-square > .art-frame__mount > img,
.lb-frame.art-frame.is-square > .art-frame__mount > video{max-width:min(48vw,680px) !important;max-height:min(68vh,760px) !important;}

@media(max-width:860px){
  /* Identical physical thickness in mobile grid and mobile detail. */
  .art-frame{
    --frame-depth:16px !important;
    padding:16px !important;
    box-shadow:
      inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.18)),
      inset 0 -8px 14px rgba(0,0,0,.10),
      inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),
      0 22px 56px rgba(12,9,6,.22),
      0 8px 18px rgba(20,14,10,.07) !important;
  }
  .art-frame > .art-frame__mount{
    --mount-depth:9px !important;
    padding:9px !important;
  }
  .media > .work-link > .art-frame.is-portrait{width:min(var(--frame-fit,72%),82%) !important;}
  .media > .work-link > .art-frame.is-square{width:min(var(--frame-fit,90%),94%) !important;}
  .lb-frame.art-frame{max-width:calc(100vw - 28px) !important;max-height:none !important;}
  .lb-frame.art-frame > .art-frame__mount{max-width:100% !important;max-height:none !important;}
  .lb-frame.art-frame > .art-frame__mount > img,
  .lb-frame.art-frame > .art-frame__mount > video,
  .lb-frame.art-frame.is-portrait > .art-frame__mount > img,
  .lb-frame.art-frame.is-portrait > .art-frame__mount > video,
  .lb-frame.art-frame.is-square > .art-frame__mount > img,
  .lb-frame.art-frame.is-square > .art-frame__mount > video{
    max-width:100% !important;
    max-height:none !important;
  }
  .single-work-frame{max-width:100% !important;}
  .single-work-frame > .art-frame__mount,
  .single-work-frame > .art-frame__mount > img,
  .single-work-frame > .art-frame__mount > video{max-width:100% !important;max-height:none !important;}
}


/* =========================================================
   EDITORIAL COVER + ABOUT / 001
   The About block is the opening page of the archive — no conventional
   masthead, logo bar or issue label above it.
========================================================= */

.about-cover{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(100px,.72fr) minmax(420px,2.35fr) minmax(250px,1fr);
  grid-template-areas:"kicker statement copy";
  column-gap:clamp(26px,4vw,76px);
  align-items:end;
  margin:0 var(--pad);
  padding:clamp(34px,4.8vw,78px) 0 clamp(64px,9vw,150px);
  overflow:hidden;
}
.about-kicker{
  grid-area:kicker;
  align-self:start;
  padding-top:.72em;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#81786e;
}
.about-statement{
  grid-area:statement;
  position:relative;
  z-index:2;
  margin:0;
  max-width:10.6ch;
  font-family:var(--font-serif);
  font-size:clamp(54px,6.2vw,116px);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.055em;
  color:#211d19;
}
.about-statement span{display:block}
.about-statement span:nth-child(2){margin-left:.30em;font-style:italic}
.about-statement span:nth-child(3){margin-left:.80em}
.about-statement span:nth-child(4){margin-left:.16em;font-style:italic}
.about-copy{
  grid-area:copy;
  position:relative;
  z-index:2;
  align-self:end;
  max-width:35ch;
  padding:0 0 clamp(5px,.55vw,11px);
}
.about-copy > p{
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(15px,1vw,18px);
  font-weight:400;
  font-style:italic;
  line-height:1.46;
  letter-spacing:-.01em;
  color:#5a5149;
}
.about-mark{
  position:absolute;
  z-index:0;
  width:clamp(290px,34vw,590px);
  aspect-ratio:1.42;
  left:43%;
  top:52%;
  border:2px solid rgba(91,70,49,.065);
  border-radius:49% 51% 46% 54% / 45% 53% 47% 55%;
  transform:translate(-50%,-50%) rotate(-8deg) skewX(-4deg);
  pointer-events:none;
}
.about-mark::after{
  content:"";
  position:absolute;
  inset:8% -5% -9% 7%;
  border:1px solid rgba(91,70,49,.045);
  border-radius:53% 47% 57% 43% / 48% 44% 56% 52%;
  transform:rotate(5deg);
}

/* Process film: visual transition into the exhibition, no longer the site masthead. */
.intro-film.intro-film--process{
  height:min(72vh,780px);
  min-height:520px;
  margin:0 var(--pad) clamp(72px,9vw,140px);
  border:0;
  box-shadow:0 20px 58px rgba(42,32,24,.075);
}
.intro-film--process::after{
  background:linear-gradient(180deg,rgba(20,17,14,.18),rgba(20,17,14,.02) 40%,rgba(20,17,14,.38));
}
.intro-film--process .intro-top{
  top:22px;
  left:22px;
  right:22px;
  align-items:flex-start;
}
.film-chip,
.intro-film--process .mode-chip,
.intro-film--process .scroll-note{
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(0,0,0,.2);
}
.film-chip span,
.intro-film--process .mode-chip span{color:rgba(255,255,255,.58)}
.intro-film--process .mode-chip{
  writing-mode:horizontal-tb;
  transform:none;
  text-align:right;
}
.film-caption{
  position:absolute;
  z-index:3;
  left:22px;
  bottom:22px;
  display:grid;
  gap:4px;
  max-width:42ch;
  color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.22);
}
.film-caption span{
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.5;
  letter-spacing:-.005em;
}
.film-caption strong{
  font-family:var(--font-serif);
  font-size:clamp(19px,1.7vw,29px);
  line-height:1.05;
  font-weight:400;
  font-style:italic;
}
.intro-film--process .scroll-note{
  right:20px;
  bottom:22px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

@media(max-width:980px){
  .about-cover{
    grid-template-columns:92px minmax(0,1.6fr) minmax(210px,.85fr);
    grid-template-areas:"kicker statement copy";
    column-gap:26px;
    align-items:end;
  }
  .about-copy{
    align-self:end;
    max-width:31ch;
    padding:0 0 5px;
  }
  .about-copy > p{
    font-size:14px;
    line-height:1.46;
  }
}

@media(max-width:860px){

  .about-cover{
    display:block;
    margin:0 18px;
    padding:28px 0 72px;
  }
  .about-kicker{
    margin-bottom:32px;
    padding:0;
    font-size:8px;
  }
  .about-statement{
    max-width:9.2ch;
    font-size:clamp(46px,14vw,72px);
    line-height:.86;
    letter-spacing:-.05em;
  }
  .about-statement span:nth-child(2){margin-left:.14em}
  .about-statement span:nth-child(3){margin-left:.35em}
  .about-statement span:nth-child(4){margin-left:.06em}
  .about-copy{
    max-width:31ch;
    margin:28px 0 0 auto;
    padding:0;
  }
  .about-copy > p{
    font-size:clamp(15px,4.3vw,18px);
    line-height:1.4;
    letter-spacing:-.01em;
  }
  .about-meta{margin-top:34px;font-size:7.8px}
  .about-mark{
    width:82vw;
    left:56%;
    top:41%;
    opacity:.8;
  }

  .intro-film.intro-film--process{
    height:62vh;
    min-height:460px;
    margin:0 18px 86px;
  }
  .intro-film--process .intro-top{top:16px;left:16px;right:16px}
  .film-chip,.intro-film--process .mode-chip{font-size:7.5px}
  .film-caption{left:16px;right:16px;bottom:17px;max-width:31ch}
  .film-caption span{font-size:10px}
  .film-caption strong{font-size:20px}
  .intro-film--process .scroll-note{display:none}
}


/* About copy: editorial footnote under the statement */
@media(min-width:981px){
  .about-cover{
    padding-bottom:clamp(72px,8vw,126px);
  }
}


/* =========================================================
   SPLIT OPENING / FIRST IMPRESSION
   Desktop: editorial statement ~2/3 + tall process film ~1/3.
   Mobile: stack naturally, preserving the text-first entrance.
========================================================= */
.opening-hero{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:clamp(28px,4vw,72px);
  min-height:clamp(680px,92svh,960px);
  margin:0 var(--pad);
  padding:clamp(28px,4vw,68px) 0 clamp(70px,7vw,118px);
  align-items:stretch;
}

.opening-copy{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,.34fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "kicker kicker"
    "statement copy";
  column-gap:clamp(24px,3vw,54px);
  align-items:end;
  overflow:hidden;
  padding:0 0 clamp(4px,.4vw,8px);
}

.opening-copy .about-kicker{
  grid-area:kicker;
  align-self:start;
  margin:0;
  padding:.4em 0 0;
}

.opening-copy .about-statement{
  grid-area:statement;
  align-self:center;
  max-width:9.2ch;
  font-size:clamp(58px,5.75vw,110px);
  line-height:.84;
}

.opening-copy .about-copy{
  grid-area:copy;
  align-self:end;
  max-width:29ch;
  padding:0 0 clamp(8px,.7vw,14px);
}

.opening-copy .about-copy > p{
  font-size:clamp(14px,.94vw,17px);
  line-height:1.48;
}

.opening-copy .about-mark{
  width:clamp(300px,31vw,570px);
  left:48%;
  top:59%;
}

/* The process film becomes a tall visual panel rather than a second hero. */
.intro-film.intro-film--process.opening-film{
  align-self:stretch;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  border-radius:0;
  box-shadow:0 22px 58px rgba(42,32,24,.09);
}

.intro-film--process.opening-film video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

.opening-film::after{
  background:
    linear-gradient(180deg,rgba(20,17,14,.20),rgba(20,17,14,.01) 38%,rgba(20,17,14,.26)) !important;
}

.opening-film .intro-top{
  top:18px;
  left:18px;
  right:18px;
}

.opening-film .film-chip,
.opening-film .mode-chip{
  font-size:7.8px;
}

.opening-film .scroll-note{
  right:16px;
  bottom:18px;
  font-size:7.8px;
}

/* The old standalone cover / film spacing no longer participates. */
.opening-hero > .about-cover{margin:0;padding:0}
.opening-hero + .intro-film{margin-top:0}

/* Medium desktop / tablet landscape */
@media(max-width:1180px) and (min-width:861px){
  .opening-hero{
    grid-template-columns:minmax(0,1.72fr) minmax(280px,.82fr);
    gap:30px;
    min-height:760px;
  }
  .opening-copy{
    grid-template-columns:minmax(0,1fr) minmax(170px,.32fr);
    column-gap:24px;
  }
  .opening-copy .about-statement{
    font-size:clamp(54px,6vw,82px);
  }
  .opening-copy .about-copy > p{
    font-size:13.5px;
  }
}

/* Mobile: statement first, then copy, then a portrait process film. */
@media(max-width:860px){
  .opening-hero{
    display:block;
    min-height:0;
    margin:0 18px;
    padding:28px 0 86px;
  }

  .opening-copy{
    display:block;
    overflow:hidden;
    padding:0;
  }

  .opening-copy .about-kicker{
    margin:0 0 32px;
    padding:0;
  }

  .opening-copy .about-statement{
    max-width:9.2ch;
    font-size:clamp(46px,14vw,72px);
    line-height:.86;
  }

  .opening-copy .about-copy{
    max-width:31ch;
    margin:28px 0 0 auto;
    padding:0;
  }

  .opening-copy .about-copy > p{
    font-size:clamp(15px,4.3vw,18px);
    line-height:1.4;
  }

  .opening-copy .about-mark{
    width:82vw;
    left:56%;
    top:39%;
  }

  .intro-film.intro-film--process.opening-film{
    position:relative;
    aspect-ratio:4 / 5;
    height:auto;
    min-height:0;
    margin:54px 0 0;
    box-shadow:0 18px 44px rgba(42,32,24,.085);
  }

  .opening-film .intro-top{
    top:14px;
    left:14px;
    right:14px;
  }

  .opening-film .film-chip,
  .opening-film .mode-chip{
    font-size:7.2px;
  }

  .opening-film .scroll-note{
    display:none;
  }
}


/* =========================================================
   SPLIT OPENING — REFINED BALANCE
   Cleaner film panel + headline visually centred in the left field.
========================================================= */
@media(min-width:861px){
  .opening-copy{
    grid-template-columns:minmax(0,1fr) minmax(170px,.24fr) !important;
    column-gap:clamp(18px,2.2vw,40px) !important;
  }

  .opening-copy .about-statement{
    justify-self:center;
    width:min(9.2ch,100%);
    transform:translateX(clamp(18px,2.2vw,44px));
  }

  .opening-copy .about-copy{
    max-width:27ch;
    padding-bottom:clamp(8px,.7vw,14px);
  }

  /* Only the exhibition state remains in the film, quietly at top-right. */
  .opening-film .intro-top{
    justify-content:flex-end !important;
  }

  .opening-film .mode-chip{
    text-align:right;
  }
}

@media(max-width:1180px) and (min-width:861px){
  .opening-copy{
    grid-template-columns:minmax(0,1fr) minmax(150px,.22fr) !important;
  }

  .opening-copy .about-statement{
    transform:translateX(clamp(10px,1.5vw,24px));
  }
}


/* =========================================================
   MUSEUM / TOMBSTONE LABEL SYSTEM
   GRID  = factual wall label only
   DETAIL = complete catalogue label + curatorial note + quote
========================================================= */

/* Grid label: discreet, factual, consistent across exhibition modes. */
.work .caption.object-label--grid,
.work.feature .caption.object-label--grid,
.mode-quiet .work .caption.object-label--grid,
.mode-dense .work .caption.object-label--grid,
.mode-monumental .work .caption.object-label--grid{
  display:block !important;
  box-sizing:border-box !important;
  margin-top:18px !important;
  padding:0 !important;
  border:0 !important;
  color:#1b1815;
}

.object-label__number,
.lb-number{
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.35;
  letter-spacing:.15em;
  font-weight:400;
  color:#999187;
}

.object-label--grid .object-label__number{
  margin-bottom:10px;
}

.object-label__identity{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.38vw,24px);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:400;
  color:#171411;
}

.object-label__title{
  font-family:inherit;
  font-weight:400;
  font-style:italic;
}

.object-label__year{
  font-family:inherit;
  font-weight:400;
  font-style:normal;
}

.object-label__facts,
.lb-facts{
  margin-top:9px;
  font-family:var(--font-sans);
  font-size:10px;
  line-height:1.52;
  letter-spacing:.002em;
  font-weight:400;
  color:#756e66;
}

.object-label__facts > div,
.lb-facts > div{
  margin:0;
}

/* Old interpretive caption material is deliberately absent from the grid. */
.object-label--grid p,
.object-label--grid blockquote,
.object-label--grid .caption-line{
  display:none !important;
}

/* Hover remains restrained: only the artwork title takes the exhibition ink. */
.work .object-label__title{
  transition:color .24s ease;
}
.work:hover .object-label__title{
  color:var(--hover-ink);
}

/* Detail: catalogue number, italic title, roman year, then factual rows. */
.lightbox .lb-number{
  margin:0 0 13px;
}

.lightbox .lb-title,
.single-work-copy .lb-title{
  font-family:var(--font-serif) !important;
  font-style:normal !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
}

.lightbox .lb-title .object-label__title,
.single-work-copy .lb-title .object-label__title{
  font-style:italic;
  font-weight:400;
}

.lightbox .lb-title .object-label__year,
.single-work-copy .lb-title .object-label__year{
  font-style:normal;
  font-weight:400;
}

.lightbox .lb-meta.lb-facts,
.single-work-copy .lb-meta.lb-facts{
  display:block;
  margin:0 0 27px;
  font-family:var(--font-sans) !important;
  font-size:10.5px !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#6f675f !important;
}

.lightbox .lb-text,
.single-work-copy .lb-text{
  position:relative;
  margin-top:0;
  padding-top:22px;
  font-family:var(--font-sans);
  font-size:11.5px;
  line-height:1.7;
  color:#4b453f !important;
}

.lightbox .lb-text::before,
.single-work-copy .lb-text::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:1px;
  background:rgba(75,67,58,.22);
}

.lightbox .lb-quote,
.single-work-copy .lb-quote{
  margin-top:19px;
  font-family:var(--font-serif);
  font-style:italic;
}

/* Keep the slide-position counter separate from the catalogue number. */
.lightbox .lb-count{
  margin-bottom:24px;
  opacity:.72;
}

/* Archive index observes the same title convention. */
.archive-cap em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
}

/* Mobile label rhythm. */
@media(max-width:860px){
  .object-label__identity{
    font-size:clamp(18px,5.5vw,23px);
  }

  .object-label__facts,
  .lb-facts{
    font-size:10px;
  }

  .lightbox .lb-number{
    margin-bottom:11px;
  }

  .lightbox .lb-meta.lb-facts{
    margin-bottom:23px;
  }

  .lightbox .lb-text{
    padding-top:19px;
  }
}


/* =========================================================
   INTRO INK + ARCHIVE HEADER FIX
========================================================= */

/* Softer warm-grey ink for the opening statement. */
.opening-copy .about-statement,
.about-statement{
  color:#887f75 !important;
}

/*
   Archive heading is part of the page flow, not a floating overlay.
   It scrolls away with the archive, so artwork is never hidden beneath it.
*/
.archive-head{
  position:relative !important;
  top:auto !important;
  z-index:1 !important;
  background:transparent !important;
  margin-bottom:clamp(34px,4vw,66px) !important;
  padding:0 0 clamp(18px,1.8vw,28px) !important;
}

/* Prevent any old sticky/translucent treatment from showing thumbnails through it. */
.archive.open .archive-head{
  position:relative !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Give the first row a clear start below the archive title. */
.archive-grid{
  position:relative;
  z-index:2;
}

/* Mobile uses the same non-overlapping behaviour. */
@media(max-width:860px){
  .archive-head{
    margin-bottom:32px !important;
    padding-bottom:16px !important;
  }
}


/* =========================================================
   OPENING DISPLAY FACE + GRID HOVER INK
========================================================= */

/* Maghfirea on the main opening statement. */
.about-statement,
.opening-copy .about-statement{
  font-family:"Wagon Local", var(--font-serif) !important;
  font-style:normal !important;
  font-weight:400 !important;
}

/* Replace the blue/cobalt hover with one warm gallery ink. */
.mode-quiet,
.mode-dense,
.mode-monumental{
  --hover-ink:#7b695e !important;
}

.work:hover .caption strong,
.work:hover .caption .object-label__title,
.work:hover .object-label__title,
.archive-item:hover .archive-cap,
.archive-item:hover .archive-cap em{
  color:#7b695e !important;
}


/* =========================================================
   WAGON AS THE GLOBAL SERIF + QUIETER OPENING STATEMENT
========================================================= */

/* All serif typography on the site now uses Gabriela. */
:root{
  --font-serif:"Wagon Local","Cormorant Garamond",Georgia,serif !important;
}

/*
   Wagon ExtraLight replaces the previous serif face,
   so the opening statement needs to be calmer and slightly smaller.
*/
.about-statement,
.opening-copy .about-statement{
  font-family:var(--font-serif) !important;
  font-size:clamp(48px,4.7vw,86px) !important;
  line-height:.90 !important;
  letter-spacing:-.035em !important;
  font-weight:400 !important;
  max-width:9.7ch !important;
}

/* Medium desktop / tablet landscape */
@media(max-width:1180px) and (min-width:861px){
  .opening-copy .about-statement{
    font-size:clamp(46px,5.15vw,72px) !important;
    line-height:.91 !important;
  }
}

/* Mobile: still expressive, but less overpowering. */
@media(max-width:860px){
  .opening-copy .about-statement,
  .about-statement{
    font-size:clamp(40px,11.6vw,60px) !important;
    line-height:.92 !important;
    letter-spacing:-.03em !important;
    max-width:9.7ch !important;
  }
}


/* =========================================================
   GRID LABEL READABILITY + OPENING SCALE TUNING
========================================================= */

/* Grid artwork title: neutral gallery grey. */
.object-label--grid .object-label__title,
.work .object-label__title{
  color:#808080 !important;
}

/* Keep hover intentional but subtle. */
.work:hover .object-label__title{
  color:#7b695e !important;
}

/* Slightly larger factual lines below the title for easier reading. */
.object-label--grid .object-label__facts{
  font-size:11.5px !important;
  line-height:1.58 !important;
  color:#6f6962 !important;
}

/* Give the title/facts a touch more separation. */
.object-label--grid .object-label__facts{
  margin-top:10px !important;
}

/* Bring the opening statement slightly back up in scale. */
.about-statement,
.opening-copy .about-statement{
  font-size:clamp(52px,5.05vw,92px) !important;
  line-height:.89 !important;
}

@media(max-width:1180px) and (min-width:861px){
  .opening-copy .about-statement{
    font-size:clamp(49px,5.45vw,76px) !important;
  }
}

@media(max-width:860px){
  .opening-copy .about-statement,
  .about-statement{
    font-size:clamp(43px,12.4vw,64px) !important;
  }

  .object-label--grid .object-label__facts{
    font-size:11px !important;
    line-height:1.55 !important;
  }
}


/* Grid year next to title: match title color. */
.object-label--grid .object-label__year,
.work .object-label__year{
  color:#808080 !important;
}

.work:hover .object-label__year{
  color:#7b695e !important;
}


/* =========================================================
   WAGON GLOBAL SERIF
========================================================= */

:root{
  --font-serif:"Wagon Local","Cormorant Garamond",Georgia,serif !important;
}

/* Use the supplied ExtraLight cut consistently for serif display text. */
.about-statement,
.opening-copy .about-statement,
.object-label__title,
.archive-cap em,
blockquote,
.quote,
.work-title,
.single-title,
.lightbox-title{
  font-weight:200 !important;
  font-synthesis:none;
}




/* =========================================================
   GRID FOCUS RING
   Remove the browser's blue focus outline from artwork cards.
========================================================= */
.work-link:focus,
.work-link:focus-visible{
  outline:2px solid var(--paper,#f4f0e7) !important;
  outline-offset:2px !important;
  -webkit-tap-highlight-color:transparent;
}

/* Keep keyboard focus legible without a colored border around the artwork. */
.work-link:focus-visible + *{
  outline:none !important;
}


/* =========================================================
   ARCHIVE TYPOGRAPHY + MOBILE LINK COLOR
========================================================= */

/*
   Earlier art direction intentionally switched every 3n+2 archive caption
   to the sans face. Keep the catalogue typography consistent instead:
   Wagon italic for the title, Wagon roman for the year.
*/
.archive-item:nth-child(3n+2) .archive-cap,
.archive-cap{
  font-family:var(--font-serif) !important;
  font-size:21px !important;
  line-height:.94 !important;
  font-weight:200 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
}

/* Catalogue number stays mono. */
.archive-cap > span{
  font-family:var(--font-mono) !important;
  font-size:9px !important;
  font-weight:400 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

/* Explicit link states prevent Safari/iOS from introducing blue link text. */
.archive-item,
.archive-item:link,
.archive-item:visited,
.archive-item:hover,
.archive-item:active,
.archive-item:focus,
.archive-item:focus-visible{
  color:var(--ink) !important;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
}

.archive-item .archive-cap,
.archive-item:link .archive-cap,
.archive-item:visited .archive-cap,
.archive-item:active .archive-cap,
.archive-item:focus .archive-cap,
.archive-item:focus-visible .archive-cap{
  color:var(--ink) !important;
}

/* Preserve the existing warm hover only on devices that actually hover. */
@media(hover:hover) and (pointer:fine){
  .archive-item:hover .archive-cap{
    color:#7b695e !important;
  }
}

@media(max-width:860px){
  .archive-item:nth-child(3n+2) .archive-cap,
  .archive-cap{
    font-size:16px !important;
    line-height:1.02 !important;
  }
}


/* =========================================================
   ARCHIVE VISUAL CLEANUP
========================================================= */

/* Archive heading uses the same warm-grey ink as the opening statement. */
.archive-head h2{
  color:#887f75 !important;
}

/* Desktop archive: remove the faint layout/card rectangle behind physical frames. */
@media(min-width:861px){
  .archive-thumb{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .archive-thumb::before,
  .archive-thumb::after{
    content:none !important;
    display:none !important;
  }
}

/* Mobile "View archive" control: never use browser/iOS blue. */
@media(max-width:860px){
  #openArchive,
  #openArchive:hover,
  #openArchive:focus,
  #openArchive:focus-visible,
  #openArchive:active{
    color:#887f75 !important;
    -webkit-text-fill-color:#887f75 !important;
    text-decoration:none !important;
    outline-color:#887f75 !important;
    -webkit-tap-highlight-color:transparent;
  }
}


/* =========================================================
   IOS / MOBILE GRID IMAGE SAFETY
   Current DOM is .media > .work-link > .art-frame.
   Unknown image geometry gets a temporary box so Safari cannot
   leave a native-lazy image inside a collapsed frame.
========================================================= */
.media > .work-link > .art-frame.is-unknown{
  width:100% !important;
  min-width:0 !important;
}

/* Temporary geometry only. JS removes .is-unknown as soon as the
   decoded image exposes its natural width/height. */
.media > .work-link > .art-frame.is-unknown > .art-frame__mount{
  aspect-ratio:4 / 3 !important;
  min-height:1px !important;
}

@media(max-width:860px){
  .media > .work-link > .art-frame.is-unknown{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Same safety net inside the archive overlay. */
.archive-thumb > .art-frame.is-unknown{
  width:100% !important;
}
.archive-thumb > .art-frame.is-unknown > .art-frame__mount{
  aspect-ratio:4 / 3 !important;
  min-height:1px !important;
}


/* =========================================================
   ARCHIVE THUMBNAIL CONTAINER — SAME ON DESKTOP + MOBILE
========================================================= */

/* Remove the faint square/card container behind archive artworks everywhere. */
.archive-thumb{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.archive-thumb::before,
.archive-thumb::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   DESKTOP DETAIL COPY INSET
   Keep long artwork titles comfortably away from the viewport edge.
========================================================= */
@media(min-width:861px){
  .lightbox .lb-copy{
    transform:translateX(clamp(-112px,-6vw,-72px));
  }

  /* Keep the standalone /work/ page visually consistent. */
  .single-work-copy{
    transform:translateX(clamp(-72px,-4vw,-42px));
  }
}


/* =========================================================
   MUTED FRAME PALETTE
   Replace the two explicitly gold families with quieter materials.
   01 Baroque -> Smoked walnut
   05 Brass   -> Aged pewter
========================================================= */

/* 01 — Smoked walnut: keep the more decorative profile, remove gold. */
.frame-baroque{
  --frame-bg:linear-gradient(
    135deg,
    #2a211b 0%,
    #4d392c 13%,
    #745846 28%,
    #3a2b23 46%,
    #654b3b 63%,
    #30241e 81%,
    #594235 100%
  ) !important;
  --frame-border:#2b211b !important;
  --frame-highlight:rgba(236,220,202,.16) !important;
  --frame-inner-shadow:rgba(29,20,15,.34) !important;
  --frame-line:rgba(77,57,45,.62) !important;
  --frame-line2:rgba(226,209,191,.12) !important;
  --mat-bg:#ebe4da !important;
}

.art-frame.frame-baroque::before{
  border:3px ridge rgba(92,70,55,.76) !important;
  box-shadow:
    inset 0 0 0 5px rgba(35,26,21,.38),
    inset 0 0 0 7px rgba(205,184,164,.10) !important;
}

.art-frame.frame-baroque::after{
  border:2px solid rgba(49,36,29,.78) !important;
  box-shadow:
    inset 0 0 0 1px rgba(213,195,177,.16),
    inset 0 0 16px rgba(26,18,14,.24) !important;
}

.art-frame.frame-baroque > .art-frame__mount{
  --mount-bg:#ebe4da !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,76,63,.24),
    inset 0 0 0 8px rgba(246,241,233,.56),
    inset 0 0 20px rgba(55,40,30,.08) !important;
}


/* 05 — Warm walnut: quiet brown/taupe frame instead of cool grey metal. */
.frame-brass{
  --frame-bg:linear-gradient(
    135deg,
    #4a3b31 0%,
    #6e5949 18%,
    #a3876e 36%,
    #5a493d 55%,
    #8a705d 76%,
    #43362e 100%
  ) !important;
  --frame-border:rgba(72,57,47,.70) !important;
  --frame-highlight:rgba(244,232,216,.18) !important;
  --frame-inner-shadow:rgba(40,30,24,.22) !important;
  --frame-line:rgba(101,81,67,.46) !important;
  --frame-line2:rgba(248,240,231,.10) !important;
  --mat-bg:#eee5db !important;
}

.art-frame.frame-brass::before{
  border:1px solid rgba(96,76,63,.58) !important;
  box-shadow:inset 0 0 0 1px rgba(236,226,214,.14) !important;
}

.art-frame.frame-brass::after{
  border:1px solid rgba(216,206,194,.18) !important;
  box-shadow:none !important;
}

.art-frame.frame-brass > .art-frame__mount{
  --mount-bg:#eee5db !important;
  box-shadow:
    inset 0 0 0 1px rgba(96,81,69,.16),
    inset 0 0 0 7px rgba(248,243,237,.46) !important;
}

/* Legacy/detail selectors still present in the stylesheet: keep the same muted brown linework. */
.frame-baroque::before{
  border-color:rgba(92,70,55,.66) !important;
  box-shadow:inset 0 0 0 1px rgba(226,209,191,.10) !important;
}

.frame-brass::before{
  border-color:rgba(96,76,63,.52) !important;
  box-shadow:inset 0 0 0 1px rgba(236,226,214,.12) !important;
}


/* =========================================================
   NO-GOLD FRAME PALETTE + APPLE-LIKE WALL SHADOW
========================================================= */

/* Remove decorative gold corner ornaments completely. */
.art-frame__ornament,
.lb-ornament,
.frame-baroque > .art-frame__ornament,
.frame-baroque .lb-ornament{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.art-frame__ornament::before,
.art-frame__ornament::after,
.lb-ornament::before,
.lb-ornament::after{
  content:none !important;
  display:none !important;
}

/* Antique family: dark tobacco/charcoal details instead of gold lines. */
.frame-antique{
  --frame-bg:linear-gradient(
    135deg,
    #211d1a 0%,
    #3a3029 18%,
    #57483d 34%,
    #29231f 52%,
    #493c34 74%,
    #1e1b19 100%
  ) !important;
  --frame-border:#211d1a !important;
  --frame-highlight:rgba(238,228,218,.12) !important;
  --frame-inner-shadow:rgba(20,16,13,.34) !important;
  --frame-line:rgba(104,88,76,.48) !important;
  --frame-line2:rgba(232,224,216,.10) !important;
  --mat-bg:#302b27 !important;
}
.art-frame.frame-antique::before{
  border:3px double rgba(104,88,76,.48) !important;
  box-shadow:
    inset 0 0 0 4px rgba(8,6,4,.52),
    inset 0 0 0 5px rgba(218,207,195,.08) !important;
}
.art-frame.frame-antique::after{
  border:1px solid rgba(131,112,97,.40) !important;
  box-shadow:none !important;
}
.art-frame.frame-antique > .art-frame__mount{
  --mount-bg:#302b27 !important;
  box-shadow:
    inset 0 0 0 1px rgba(130,112,96,.22),
    inset 0 0 0 7px rgba(41,35,31,.80) !important;
}

/* Apple-like light: broad, soft, weighted below the object. */
:root{
  --frame-shadow-x:0px;
  --frame-shadow-y:20px;
  --frame-shadow-blur:54px;
  --frame-shadow-spread:-18px;
  --frame-shadow-opacity:.20;

  --frame-contact-x:0px;
  --frame-contact-y:7px;
  --frame-contact-blur:16px;
  --frame-contact-opacity:.10;
}

.art-frame,
.work:hover .art-frame,
.archive-item:hover .art-frame,
.art-frame:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.18)),
    inset 0 -8px 14px rgba(0,0,0,.09),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),

    var(--frame-contact-x) var(--frame-contact-y)
      var(--frame-contact-blur) rgba(22,18,15,var(--frame-contact-opacity)),

    var(--frame-shadow-x) var(--frame-shadow-y)
      var(--frame-shadow-blur) var(--frame-shadow-spread)
      rgba(18,15,12,var(--frame-shadow-opacity)),

    calc(var(--frame-shadow-x) * .72)
      calc(var(--frame-shadow-y) + 18px)
      calc(var(--frame-shadow-blur) * 1.35)
      calc(var(--frame-shadow-spread) - 12px)
      rgba(18,15,12,calc(var(--frame-shadow-opacity) * .42))
      !important;

  transition:box-shadow .20s linear;
  will-change:box-shadow;
}

/* On touch/reduced-motion, keep the same premium shadow but static. */
@media(pointer:coarse), (prefers-reduced-motion:reduce){
  :root{
    --frame-shadow-x:0px;
    --frame-shadow-y:18px;
    --frame-shadow-blur:48px;
    --frame-shadow-spread:-18px;
    --frame-shadow-opacity:.18;
    --frame-contact-x:0px;
    --frame-contact-y:7px;
    --frame-contact-blur:15px;
    --frame-contact-opacity:.09;
  }
  .art-frame,
  .work:hover .art-frame,
  .archive-item:hover .art-frame,
  .art-frame:hover{
    transition:none !important;
  }
}


/* =========================================================
   STRONG APPLE-LIKE FRAME SHADOW
   More visible contact + broad soft wall shadow.
========================================================= */
:root{
  --frame-shadow-x:0px;
  --frame-shadow-y:22px;
  --frame-shadow-blur:50px;
  --frame-shadow-spread:-12px;
  --frame-shadow-opacity:.33;

  --frame-contact-x:0px;
  --frame-contact-y:8px;
  --frame-contact-blur:18px;
  --frame-contact-opacity:.18;
}

.art-frame,
.work:hover .art-frame,
.archive-item:hover .art-frame,
.art-frame:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.18)),
    inset 0 -8px 14px rgba(0,0,0,.09),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),

    /* close contact shadow */
    var(--frame-contact-x)
      var(--frame-contact-y)
      var(--frame-contact-blur)
      rgba(20,15,11,var(--frame-contact-opacity)),

    /* main broad wall shadow */
    var(--frame-shadow-x)
      var(--frame-shadow-y)
      var(--frame-shadow-blur)
      var(--frame-shadow-spread)
      rgba(14,11,8,var(--frame-shadow-opacity)),

    /* softer lower falloff */
    calc(var(--frame-shadow-x) * .75)
      calc(var(--frame-shadow-y) + 22px)
      calc(var(--frame-shadow-blur) * 1.48)
      calc(var(--frame-shadow-spread) - 16px)
      rgba(14,11,8,calc(var(--frame-shadow-opacity) * .46))
      !important;

  transition:box-shadow .18s linear;
}

/* Mobile/touch: same richer look, but static. */
@media(pointer:coarse), (prefers-reduced-motion:reduce){
  :root{
    --frame-shadow-x:0px;
    --frame-shadow-y:20px;
    --frame-shadow-blur:46px;
    --frame-shadow-spread:-12px;
    --frame-shadow-opacity:.28;

    --frame-contact-x:0px;
    --frame-contact-y:8px;
    --frame-contact-blur:17px;
    --frame-contact-opacity:.16;
  }
}


/* =========================================================
   DIRECTIONAL WALL SHADOW — stronger cast from left to right
   and downward, with clearer separation from the background.
========================================================= */
:root{
  --frame-shadow-x: 18px;
  --frame-shadow-y: 24px;
  --frame-shadow-blur: 34px;
  --frame-shadow-spread: -16px;
  --frame-shadow-opacity: .28;

  --frame-contact-x: 6px;
  --frame-contact-y: 9px;
  --frame-contact-blur: 16px;
  --frame-contact-opacity: .16;
}

.art-frame,
.work:hover .art-frame,
.archive-item:hover .art-frame,
.art-frame:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.16)),
    inset 0 -8px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),

    /* shadow hugging the frame */
    var(--frame-contact-x)
      var(--frame-contact-y)
      var(--frame-contact-blur)
      rgba(16,12,8,var(--frame-contact-opacity)),

    /* main cast shadow */
    var(--frame-shadow-x)
      var(--frame-shadow-y)
      var(--frame-shadow-blur)
      var(--frame-shadow-spread)
      rgba(14,10,7,var(--frame-shadow-opacity)),

    /* wider penumbra shifted further right and down */
    calc(var(--frame-shadow-x) * 1.55)
      calc(var(--frame-shadow-y) * 1.55)
      calc(var(--frame-shadow-blur) * 1.4)
      calc(var(--frame-shadow-spread) - 8px)
      rgba(14,10,7,calc(var(--frame-shadow-opacity) * .72)),

    /* long soft tail on the wall */
    calc(var(--frame-shadow-x) * 2.1)
      calc(var(--frame-shadow-y) * 2.1)
      calc(var(--frame-shadow-blur) * 2.05)
      calc(var(--frame-shadow-spread) - 18px)
      rgba(14,10,7,calc(var(--frame-shadow-opacity) * .36))
      !important;

  transition: box-shadow .18s linear;
}

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  :root{
    --frame-shadow-x: 14px;
    --frame-shadow-y: 20px;
    --frame-shadow-blur: 30px;
    --frame-shadow-spread: -15px;
    --frame-shadow-opacity: .22;

    --frame-contact-x: 4px;
    --frame-contact-y: 8px;
    --frame-contact-blur: 14px;
    --frame-contact-opacity: .13;
  }
}


/* =========================================================
   FRAME-SPECIFIC PHYSICAL SHADOWS
   Same light direction for the whole wall, different shadow
   depth/density according to each physical frame family.
   Uses addition-only calc() for better Safari compatibility.
========================================================= */

/* Shared defaults */
.art-frame{
  --family-x-extra:0px;
  --family-y-extra:0px;
  --family-blur-extra:0px;
  --family-spread:-14px;

  --family-contact-opacity:.15;
  --family-main-opacity:.27;
  --family-penumbra-opacity:.18;
  --family-tail-opacity:.075;
}

/* 01 Smoked walnut / former baroque:
   thickest frame = deepest, densest cast shadow. */
.art-frame.frame-baroque{
  --family-x-extra:4px;
  --family-y-extra:5px;
  --family-blur-extra:2px;
  --family-spread:-10px;

  --family-contact-opacity:.24;
  --family-main-opacity:.39;
  --family-penumbra-opacity:.28;
  --family-tail-opacity:.14;
}

/* 02 Museum oak:
   medium depth, broad and calm. */
.art-frame.frame-museum{
  --family-x-extra:0px;
  --family-y-extra:1px;
  --family-blur-extra:5px;
  --family-spread:-15px;

  --family-contact-opacity:.15;
  --family-main-opacity:.27;
  --family-penumbra-opacity:.18;
  --family-tail-opacity:.075;
}

/* 03 Antique tobacco:
   dark and relatively compact. */
.art-frame.frame-antique{
  --family-x-extra:3px;
  --family-y-extra:3px;
  --family-blur-extra:0px;
  --family-spread:-11px;

  --family-contact-opacity:.22;
  --family-main-opacity:.36;
  --family-penumbra-opacity:.25;
  --family-tail-opacity:.115;
}

/* 04 White gesso:
   lighter, softer, more diffuse. */
.art-frame.frame-gesso{
  --family-x-extra:-1px;
  --family-y-extra:-1px;
  --family-blur-extra:9px;
  --family-spread:-18px;

  --family-contact-opacity:.10;
  --family-main-opacity:.19;
  --family-penumbra-opacity:.12;
  --family-tail-opacity:.045;
}

/* 05 Warm thin walnut:
   thinnest family = restrained shadow. */
.art-frame.frame-brass{
  --family-x-extra:-1px;
  --family-y-extra:-2px;
  --family-blur-extra:6px;
  --family-spread:-17px;

  --family-contact-opacity:.11;
  --family-main-opacity:.21;
  --family-penumbra-opacity:.135;
  --family-tail-opacity:.052;
}

/* 06 Studio wood:
   natural middle-weight shadow. */
.art-frame.frame-studio{
  --family-x-extra:1px;
  --family-y-extra:1px;
  --family-blur-extra:3px;
  --family-spread:-14px;

  --family-contact-opacity:.16;
  --family-main-opacity:.29;
  --family-penumbra-opacity:.195;
  --family-tail-opacity:.082;
}

/* Authoritative shadow recipe.
   Light comes from upper-left, so every frame casts right/down.
   Crucially, this avoids calc() multiplication, which can be fragile
   in some Safari versions and can make the intended shadow fall back. */
.art-frame,
.work:hover .art-frame,
.archive-item:hover .art-frame,
.art-frame:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,244,214,.16)),
    inset 0 -8px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px color-mix(in srgb,var(--frame-border,rgba(80,62,36,.42)) 68%,transparent),

    /* contact shadow: tight, immediately on the wall */
    calc(var(--frame-contact-x) + var(--family-x-extra))
      calc(var(--frame-contact-y) + var(--family-y-extra))
      calc(var(--frame-contact-blur) + 2px)
      rgba(16,12,8,var(--family-contact-opacity)),

    /* main physical cast */
    calc(var(--frame-shadow-x) + var(--family-x-extra))
      calc(var(--frame-shadow-y) + var(--family-y-extra))
      calc(var(--frame-shadow-blur) + var(--family-blur-extra))
      var(--family-spread)
      rgba(14,10,7,var(--family-main-opacity)),

    /* penumbra: visibly projected farther right/down */
    calc(var(--frame-shadow-x) + var(--family-x-extra) + 18px)
      calc(var(--frame-shadow-y) + var(--family-y-extra) + 18px)
      calc(var(--frame-shadow-blur) + var(--family-blur-extra) + 16px)
      calc(var(--family-spread) - 8px)
      rgba(14,10,7,var(--family-penumbra-opacity)),

    /* long soft tail */
    calc(var(--frame-shadow-x) + var(--family-x-extra) + 36px)
      calc(var(--frame-shadow-y) + var(--family-y-extra) + 38px)
      calc(var(--frame-shadow-blur) + var(--family-blur-extra) + 42px)
      calc(var(--family-spread) - 18px)
      rgba(14,10,7,var(--family-tail-opacity))
      !important;
}

/* On touch devices keep the material differences, just reduce GPU cost a bit. */
@media(pointer:coarse), (prefers-reduced-motion:reduce){
  .art-frame{
    --family-blur-extra:0px;
  }

  .art-frame.frame-gesso{--family-blur-extra:5px;}
  .art-frame.frame-brass{--family-blur-extra:3px;}
  .art-frame.frame-museum{--family-blur-extra:3px;}
}


/* =========================================================
   REALISTIC WALNUT REPLACEMENT FOR THE MUSEUM FRAME FAMILY
   Replaces the flattest-looking medium-brown frame with a more
   believable walnut gallery frame in both grid and detail.
========================================================= */

/* Family variables when the frame is used as a plain token */
.frame-museum,
.art-frame.frame-museum{
  --frame-bg:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0 2px,
      rgba(0,0,0,.028) 2px 7px,
      rgba(255,255,255,.010) 7px 11px
    ),
    linear-gradient(
      135deg,
      #4f372c 0%,
      #72523f 18%,
      #a57d60 34%,
      #6a4b39 52%,
      #8e694f 73%,
      #4c3529 100%
    ) !important;
  --frame-border:rgba(73,52,38,.76) !important;
  --frame-highlight:rgba(255,244,226,.18) !important;
  --frame-inner-shadow:rgba(47,31,22,.22) !important;
  --frame-line:rgba(86,62,46,.52) !important;
  --frame-line2:rgba(255,245,232,.12) !important;
  --mat-bg:#f2ede5 !important;
}

/* Canonical shared frame component in grid / archive / overview */
.art-frame.frame-museum{
  --frame-depth:clamp(18px,1.5vw,24px) !important;
}
.art-frame.frame-museum::before{
  inset:6px !important;
  border:1px solid rgba(92,67,48,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,233,.12),
    inset 0 -4px 10px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,243,226,.06) !important;
}
.art-frame.frame-museum::after{
  content:"" !important;
  display:block !important;
  inset:13px !important;
  border:1px solid rgba(255,246,236,.14) !important;
  box-shadow:inset 0 0 0 1px rgba(64,45,31,.10) !important;
}
.art-frame.frame-museum > .art-frame__mount{
  --mount-depth:clamp(18px,1.65vw,26px) !important;
  --mount-bg:#f3eee6 !important;
  box-shadow:
    inset 0 0 0 1px rgba(115,99,79,.16),
    inset 0 0 0 9px rgba(255,255,255,.42),
    inset 0 0 18px rgba(77,58,40,.06) !important;
}

/* Lightbox / detail frame */
.frame-museum{
  --frame-depth:clamp(18px,1.5vw,24px) !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0 2px,
      rgba(0,0,0,.028) 2px 7px,
      rgba(255,255,255,.010) 7px 11px
    ),
    linear-gradient(
      135deg,
      #4f372c 0%,
      #72523f 18%,
      #a57d60 34%,
      #6a4b39 52%,
      #8e694f 73%,
      #4c3529 100%
    ) !important;
  border:1px solid rgba(73,52,38,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,226,.18),
    inset 0 -8px 16px rgba(0,0,0,.12),
    0 0 0 1px rgba(72,50,36,.26),
    0 14px 34px rgba(33,23,17,.18) !important;
}
.frame-museum::before{
  inset:6px !important;
  border:1px solid rgba(92,67,48,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,233,.12),
    inset 0 -4px 10px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,243,226,.06) !important;
}
.frame-museum::after{
  content:"" !important;
  display:block !important;
  inset:13px !important;
  border:1px solid rgba(255,246,236,.14) !important;
  box-shadow:inset 0 0 0 1px rgba(64,45,31,.10) !important;
}
.frame-museum .lb-art{
  padding:clamp(18px,1.65vw,26px) !important;
  background:#f3eee6 !important;
  box-shadow:
    inset 0 0 0 1px rgba(115,99,79,.16),
    inset 0 0 0 9px rgba(255,255,255,.42),
    inset 0 0 18px rgba(77,58,40,.06) !important;
}
.frame-museum .lb-art img,
.frame-museum .lb-art video{
  box-shadow:0 0 0 1px rgba(60,50,40,.10) !important;
}

/* Room tint in the detail view stays warm and realistic */
.lightbox.frame-style-museum{
  background:
    radial-gradient(circle at 30% 22%, rgba(255,251,245,.18), transparent 30%),
    linear-gradient(180deg, #ede8de 0%, #e6e0d5 100%) !important;
}


/* =========================================================
   DUAL-LIGHT SHADOW REFINEMENT
   Main light stays soft and close to the frame.
   Second imaginary spotlight adds a slightly sharper cast shadow
   travelling more across the wall / background toward right + down.
========================================================= */

:root{
  --shadow-key-close: 0 14px 22px rgba(24,18,12,.12);
  --shadow-key-mid: 0 30px 42px -24px rgba(24,18,12,.16);
  --shadow-fill-cast: 14px 16px 18px -10px rgba(34,24,16,.14);
  --shadow-fill-long: 32px 24px 34px -20px rgba(34,24,16,.16);
  --shadow-fill-plane: 48px 34px 48px -30px rgba(34,24,16,.12);

  --shadow-key-close-lg: 0 22px 34px rgba(18,12,8,.14);
  --shadow-key-mid-lg: 0 44px 60px -30px rgba(18,12,8,.18);
  --shadow-fill-cast-lg: 18px 18px 22px -10px rgba(28,20,14,.16);
  --shadow-fill-long-lg: 42px 28px 40px -20px rgba(28,20,14,.18);
  --shadow-fill-plane-lg: 68px 40px 60px -34px rgba(28,20,14,.12);
}

/* Grid / archive / featured frames */
.frame-card,
.archive-thumb.frame-card,
.featured-media.frame-card{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 -8px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 62%, transparent),
    var(--shadow-key-close),
    var(--shadow-key-mid),
    var(--shadow-fill-cast),
    var(--shadow-fill-long),
    var(--shadow-fill-plane) !important;
}

.work:hover .media.frame-card,
.featured-media.frame-card:hover,
.archive-item:hover .archive-thumb.frame-card{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
    inset 0 -8px 14px rgba(0,0,0,.08),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 62%, transparent),
    0 16px 24px rgba(23,17,11,.13),
    0 34px 46px -24px rgba(23,17,11,.17),
    16px 18px 20px -10px rgba(31,22,15,.16),
    38px 28px 38px -20px rgba(31,22,15,.18),
    56px 38px 52px -30px rgba(31,22,15,.13) !important;
}

/* Detail frame */
.lb-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.16),
    inset 0 -8px 14px rgba(0,0,0,.10),
    var(--shadow-key-close-lg),
    var(--shadow-key-mid-lg),
    var(--shadow-fill-cast-lg),
    var(--shadow-fill-long-lg),
    var(--shadow-fill-plane-lg) !important;
}

/* Replace the centered floor-like oval with a directional wall cast. */
.lb-stage::after{
  width:min(62vw,860px) !important;
  height:110px !important;
  left:50% !important;
  bottom:clamp(18px, 3vh, 34px) !important;
  transform:translateX(-42%) rotate(-2deg) !important;
  background:
    radial-gradient(ellipse at 28% 28%, rgba(30,20,12,.26) 0%, rgba(30,20,12,.18) 20%, rgba(30,20,12,.10) 42%, rgba(30,20,12,0) 72%),
    linear-gradient(90deg, rgba(30,20,12,.14) 0%, rgba(30,20,12,.11) 28%, rgba(30,20,12,.07) 55%, rgba(30,20,12,0) 100%) !important;
  filter:blur(28px) !important;
  opacity:.78 !important;
  pointer-events:none;
}

@media(max-width:860px){
  .frame-card,
  .archive-thumb.frame-card,
  .featured-media.frame-card{
    box-shadow:
      inset 0 1px 0 var(--frame-highlight, rgba(255,247,227,.24)),
      inset 0 -6px 10px rgba(0,0,0,.07),
      inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 58%, transparent),
      0 10px 18px rgba(24,18,12,.10),
      0 20px 26px -18px rgba(24,18,12,.14),
      10px 10px 14px -8px rgba(34,24,16,.12),
      22px 16px 22px -14px rgba(34,24,16,.13) !important;
  }

  .lb-frame{
    box-shadow:
      inset 0 1px 0 rgba(255,244,214,.16),
      inset 0 -7px 12px rgba(0,0,0,.09),
      0 14px 22px rgba(18,12,8,.12),
      0 26px 34px -20px rgba(18,12,8,.16),
      12px 12px 16px -8px rgba(28,20,14,.14),
      24px 18px 28px -14px rgba(28,20,14,.14) !important;
  }

  .lb-stage::after{
    width:min(82vw,520px) !important;
    height:76px !important;
    transform:translateX(-44%) rotate(-2deg) !important;
    filter:blur(22px) !important;
    opacity:.72 !important;
  }
}


/* =========================================================
   STATIC DUAL-LIGHT SHADOW + REAL FRAME CLEANUP
   - no hover shadow morphing
   - one static shadow recipe that simulates two light sources
   - replace remaining less-realistic frame families with warmer wood variants
========================================================= */

/* Static two-light shadow recipe: 
   1) close soft wall shadow 
   2) directional cast shadow travelling right + down */
.media.frame-card,
.archive-thumb.frame-card,
.featured-media.frame-card,
.frame-card{
  transition:
    transform .22s ease,
    opacity .22s ease !important;
}

.media.frame-card,
.archive-thumb.frame-card,
.featured-media.frame-card,
.frame-card{
  box-shadow:
    inset 0 1px 0 rgba(255,247,229,.30),
    inset 0 -12px 18px rgba(0,0,0,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 84%, transparent),
    /* light source 1: soft object shadow close to frame */
    0 16px 26px rgba(26,18,11,.12),
    0 30px 42px -22px rgba(26,18,11,.12),
    /* light source 2: longer cast shadow onto wall */
    18px 16px 18px -12px rgba(31,22,14,.12),
    34px 26px 30px -18px rgba(31,22,14,.13),
    58px 40px 52px -28px rgba(31,22,14,.10) !important;
}

/* Absolutely no hover shadow bloom / blur. Keep same shadow on hover. */
.work:hover .media.frame-card,
.featured-media.frame-card:hover,
.archive-item:hover .archive-thumb.frame-card,
.media.frame-card:hover,
.archive-thumb.frame-card:hover,
.frame-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,247,229,.30),
    inset 0 -12px 18px rgba(0,0,0,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 84%, transparent),
    0 16px 26px rgba(26,18,11,.12),
    0 30px 42px -22px rgba(26,18,11,.12),
    18px 16px 18px -12px rgba(31,22,14,.12),
    34px 26px 30px -18px rgba(31,22,14,.13),
    58px 40px 52px -28px rgba(31,22,14,.10) !important;
  border-color:var(--frame-border, rgba(80,62,36,.28)) !important;
}

/* Detail frame gets the same dual-light feel, just slightly larger. */
.lb-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.18),
    inset 0 -10px 16px rgba(0,0,0,.10),
    0 20px 34px rgba(18,12,8,.14),
    0 38px 52px -26px rgba(18,12,8,.14),
    22px 18px 20px -12px rgba(27,19,12,.14),
    42px 30px 36px -20px rgba(27,19,12,.15),
    72px 44px 58px -30px rgba(27,19,12,.11) !important;
}

/* Directional shadow under the enlarged artwork instead of a hover-like puddle. */
.lb-stage::after{
  width:min(66vw, 920px) !important;
  height:108px !important;
  left:50% !important;
  bottom:clamp(18px,3vh,34px) !important;
  transform:translateX(-42%) rotate(-1.6deg) !important;
  background:
    radial-gradient(ellipse at 24% 28%, rgba(30,20,12,.22) 0%, rgba(30,20,12,.14) 24%, rgba(30,20,12,.08) 46%, rgba(30,20,12,0) 72%),
    linear-gradient(90deg, rgba(30,20,12,.13) 0%, rgba(30,20,12,.10) 28%, rgba(30,20,12,.06) 56%, rgba(30,20,12,0) 100%) !important;
  filter:blur(24px) !important;
  opacity:.76 !important;
}

/* Replace remaining less-realistic frame family 1 with a true walnut gallery frame. */
.frame-museum{
  --frame-bg:linear-gradient(135deg,#2b1d16 0%,#4f372a 18%,#7d5a42 36%,#9d775d 50%,#6e4f3c 68%,#3b281f 100%);
  --frame-border:rgba(58,38,26,.86);
  --frame-highlight:rgba(246,230,209,.14);
  --frame-inner-shadow:rgba(0,0,0,.22);
  --frame-line:rgba(112,82,58,.42);
  --frame-line2:rgba(245,236,224,.10);
  --mat-bg:#f1eadf;
}

/* Replace remaining less-realistic frame family 2 with a warm chestnut / oak brown frame. */
.frame-brass{
  --frame-bg:linear-gradient(135deg,#4a3023 0%,#7e5a43 22%,#b2896c 40%,#8d654c 56%,#654634 76%,#3f291f 100%);
  --frame-border:rgba(79,53,37,.84);
  --frame-highlight:rgba(248,235,215,.16);
  --frame-inner-shadow:rgba(0,0,0,.18);
  --frame-line:rgba(118,87,63,.40);
  --frame-line2:rgba(246,237,226,.11);
  --mat-bg:#f0e9dd;
}

/* Make these two replacement families feel more believable in the detail view too. */
.frame-museum::before,
.frame-brass::before{
  inset:7px !important;
  border:1px solid rgba(96,72,52,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,234,.10),
    inset 0 -2px 5px rgba(0,0,0,.12) !important;
}
.frame-museum::after,
.frame-brass::after{
  inset:14px !important;
  border:1px solid rgba(160,128,101,.14) !important;
}
.frame-museum .lb-art,
.frame-brass .lb-art{
  background:#f2ebe0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.16),
    inset 0 0 0 8px rgba(245,237,226,.52),
    inset 0 -18px 24px -18px rgba(0,0,0,.18) !important;
}

@media(max-width:860px){
  .media.frame-card,
  .archive-thumb.frame-card,
  .featured-media.frame-card,
  .frame-card,
  .work:hover .media.frame-card,
  .featured-media.frame-card:hover,
  .archive-item:hover .archive-thumb.frame-card{
    box-shadow:
      inset 0 1px 0 rgba(255,247,229,.28),
      inset 0 -9px 13px rgba(0,0,0,.10),
      inset 0 0 0 1px color-mix(in srgb, var(--frame-border, rgba(80,62,36,.28)) 80%, transparent),
      0 12px 18px rgba(26,18,11,.10),
      0 22px 28px -18px rgba(26,18,11,.10),
      12px 10px 12px -8px rgba(31,22,14,.10),
      22px 16px 20px -14px rgba(31,22,14,.11) !important;
  }

  .lb-frame{
    box-shadow:
      inset 0 1px 0 rgba(255,244,214,.18),
      inset 0 -8px 12px rgba(0,0,0,.10),
      0 16px 24px rgba(18,12,8,.12),
      0 28px 36px -22px rgba(18,12,8,.12),
      16px 12px 14px -10px rgba(27,19,12,.12),
      28px 20px 24px -16px rgba(27,19,12,.12) !important;
  }

  .lb-stage::after{
    width:min(82vw, 560px) !important;
    height:76px !important;
    filter:blur(18px) !important;
    opacity:.70 !important;
  }
}


/* =========================================================
   FINAL FRAME LIGHTING
   - absolutely no visual reaction on hover
   - fixed two-source wall shadow
   - user's long layered cast-shadow recipe
   - replace the two least-realistic wood families
========================================================= */

:root{
  /* Raw HSL components, intentionally without hsl(). */
  --shadow-color:28 22% 16%;

  /* Light 1: broad, soft shadow close to the frame. */
  --frame-soft-shadow:
    0 10px 24px -8px hsl(var(--shadow-color) / .16),
    0 22px 42px -18px hsl(var(--shadow-color) / .14);

  /*
     Light 2: longer, slightly sharper directional cast.
     This follows the supplied layered shadow almost verbatim.
  */
  --frame-cast-shadow:
    1px 0.8px 1.5px hsl(var(--shadow-color) / .39),
    9.6px 7.3px 14.6px -0.3px hsl(var(--shadow-color) / .42),
    18px 13.7px 27.3px -0.6px hsl(var(--shadow-color) / .44),
    28.9px 22px 43.9px -0.8px hsl(var(--shadow-color) / .47),
    44.6px 34px 67.7px -1.1px hsl(var(--shadow-color) / .50),
    67.8px 51.6px 102.9px -1.4px hsl(var(--shadow-color) / .52),
    101.1px 77px 153.5px -1.7px hsl(var(--shadow-color) / .55),
    147px 111.9px 223.1px -1.9px hsl(var(--shadow-color) / .58);
}


/* ---------------------------------------------------------
   NO HOVER REACTION — authoritative override
--------------------------------------------------------- */

/* Same physical object and same shadow in every pointer state. */
.media.frame-card,
.archive-thumb.frame-card,
.featured-media.frame-card,
.art-frame.frame-card,
.work:hover .media.frame-card,
.work:focus-within .media.frame-card,
.featured-media.frame-card:hover,
.featured-media.frame-card:focus-within,
.archive-item:hover .archive-thumb.frame-card,
.archive-item:focus-within .archive-thumb.frame-card,
.media.frame-card:hover,
.art-frame.frame-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,247,229,.28),
    inset 0 -11px 17px rgba(0,0,0,.105),
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--frame-border,rgba(80,62,36,.28)) 82%,
      transparent
    ),
    var(--frame-soft-shadow),
    var(--frame-cast-shadow)
    !important;

  border-color:var(--frame-border,rgba(80,62,36,.28)) !important;
  filter:none !important;
  transition:none !important;
}

/* Old rules moved the artwork/frame on hover. Kill that too. */
.work:hover .media.frame-card,
.work:focus-within .media.frame-card{
  transform:rotate(var(--tilt,0deg)) !important;
  background:inherit !important;
}

/* No zoom, contrast or saturation change on the artwork either. */
.work:hover .media.frame-card img,
.work:hover .media.frame-card video,
.work:focus-within .media.frame-card img,
.work:focus-within .media.frame-card video,
.archive-item:hover .archive-thumb.frame-card img,
.archive-item:hover .archive-thumb.frame-card video{
  transform:none !important;
  filter:none !important;
  transition:none !important;
}


/* Detail/lightbox: same two imaginary light sources, scaled for the larger object. */
.lb-frame,
.lb-frame:hover,
.lb-frame.art-frame,
.lb-frame.art-frame:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.17),
    inset 0 -10px 16px rgba(0,0,0,.10),

    /* first, softer source */
    0 16px 32px -8px hsl(var(--shadow-color) / .18),
    0 34px 58px -20px hsl(var(--shadow-color) / .16),

    /* second, directional source */
    1.4px 1.1px 2px hsl(var(--shadow-color) / .34),
    13px 10px 20px -1px hsl(var(--shadow-color) / .37),
    26px 20px 38px -2px hsl(var(--shadow-color) / .40),
    43px 33px 62px -3px hsl(var(--shadow-color) / .43),
    66px 50px 94px -4px hsl(var(--shadow-color) / .46),
    98px 74px 140px -5px hsl(var(--shadow-color) / .48)
    !important;

  transition:none !important;
}

/* Do not add a separate floor-like shadow ellipse underneath the detail. */
.lb-stage::after{
  content:none !important;
  display:none !important;
}


/* ---------------------------------------------------------
   REPLACE THE TWO LEAST-REALISTIC FRAME FAMILIES
   02 = dark natural walnut
   05 = lighter smoked oak
--------------------------------------------------------- */

/* 02 — Natural dark walnut. Matte wood, subtle grain, restrained profile. */
.frame-museum,
.art-frame.frame-museum{
  --frame-bg:
    repeating-linear-gradient(
      91deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(38,22,14,.035) 1px 4px,
      rgba(255,255,255,.010) 4px 9px
    ),
    linear-gradient(
      132deg,
      #2b1d17 0%,
      #493226 16%,
      #73513e 34%,
      #5b3e30 50%,
      #8a6650 68%,
      #50372a 83%,
      #291c16 100%
    ) !important;

  --frame-border:rgba(52,35,26,.88) !important;
  --frame-highlight:rgba(246,229,209,.12) !important;
  --frame-inner-shadow:rgba(0,0,0,.23) !important;
  --frame-line:rgba(95,68,50,.40) !important;
  --frame-line2:rgba(247,235,222,.08) !important;
  --mat-bg:#f2ece2 !important;
}

.art-frame.frame-museum{
  --frame-depth:clamp(18px,1.55vw,25px) !important;
}
.art-frame.frame-museum::before,
.frame-museum::before{
  inset:6px !important;
  border:1px solid rgba(95,67,49,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,235,.10),
    inset 0 -4px 9px rgba(0,0,0,.15)
    !important;
}
.art-frame.frame-museum::after,
.frame-museum::after{
  inset:13px !important;
  display:block !important;
  content:"" !important;
  border:1px solid rgba(225,207,190,.10) !important;
  box-shadow:none !important;
}
.art-frame.frame-museum > .art-frame__mount,
.frame-museum .lb-art{
  --mount-bg:#f2ece2 !important;
  background:#f2ece2 !important;
  box-shadow:
    inset 0 0 0 1px rgba(110,92,74,.14),
    inset 0 0 0 9px rgba(255,255,255,.40),
    inset 0 0 18px rgba(60,42,29,.045)
    !important;
}


/* 05 — Smoked light oak. Warmer and lighter, but still clearly wood. */
.frame-brass,
.art-frame.frame-brass{
  --frame-bg:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.026) 0 1px,
      rgba(73,47,31,.030) 1px 5px,
      rgba(255,255,255,.014) 5px 11px
    ),
    linear-gradient(
      134deg,
      #5b4132 0%,
      #795a46 18%,
      #ad8a6e 35%,
      #8f6c55 52%,
      #b49579 67%,
      #745541 84%,
      #4f392d 100%
    ) !important;

  --frame-border:rgba(75,52,38,.78) !important;
  --frame-highlight:rgba(255,240,222,.15) !important;
  --frame-inner-shadow:rgba(38,25,18,.18) !important;
  --frame-line:rgba(115,84,62,.38) !important;
  --frame-line2:rgba(250,238,226,.10) !important;
  --mat-bg:#f1e9df !important;
}

.art-frame.frame-brass{
  --frame-depth:clamp(17px,1.45vw,23px) !important;
}
.art-frame.frame-brass::before,
.frame-brass::before{
  inset:6px !important;
  border:1px solid rgba(111,80,59,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,235,.10),
    inset 0 -3px 8px rgba(0,0,0,.13)
    !important;
}
.art-frame.frame-brass::after,
.frame-brass::after{
  inset:12px !important;
  display:block !important;
  content:"" !important;
  border:1px solid rgba(242,228,214,.11) !important;
  box-shadow:none !important;
}
.art-frame.frame-brass > .art-frame__mount,
.frame-brass .lb-art{
  --mount-bg:#f1e9df !important;
  background:#f1e9df !important;
  box-shadow:
    inset 0 0 0 1px rgba(108,88,70,.14),
    inset 0 0 0 8px rgba(255,255,255,.38),
    inset 0 0 16px rgba(63,44,31,.04)
    !important;
}


/* Mobile: keep the exact same visual state on tap/focus; only reduce huge tail length. */
@media(max-width:860px){
  :root{
    --frame-cast-shadow:
      1px .8px 1.5px hsl(var(--shadow-color) / .30),
      7px 5.5px 11px -.3px hsl(var(--shadow-color) / .31),
      13px 10px 20px -.6px hsl(var(--shadow-color) / .32),
      22px 17px 32px -.8px hsl(var(--shadow-color) / .32),
      34px 26px 48px -1px hsl(var(--shadow-color) / .28),
      48px 36px 68px -1.4px hsl(var(--shadow-color) / .22);
  }

  .media.frame-card,
  .archive-thumb.frame-card,
  .featured-media.frame-card,
  .art-frame.frame-card,
  .work:hover .media.frame-card,
  .work:focus-within .media.frame-card,
  .archive-item:hover .archive-thumb.frame-card,
  .archive-item:focus-within .archive-thumb.frame-card{
    transition:none !important;
  }
}


/* =========================================================
   SINGLE DIRECTIONAL FRAME SHADOW — FINAL OVERRIDE
   One fixed shadow only. No hover reaction, no image flash.
========================================================= */

:root{
  --shadow-color:28 18% 20%;
  --frame-wall-shadow:
    1px 0.9px 1.6px hsl(var(--shadow-color) / 0.29),
    5.9px 5.2px 9.1px -0.2px hsl(var(--shadow-color) / 0.29),
    10.6px 9.3px 16.4px -0.5px hsl(var(--shadow-color) / 0.30),
    16.1px 14.1px 24.9px -0.7px hsl(var(--shadow-color) / 0.31),
    23.2px 20.3px 35.8px -1px hsl(var(--shadow-color) / 0.31),
    33px 28.9px 51px -1.2px hsl(var(--shadow-color) / 0.32),
    46.4px 40.6px 71.7px -1.5px hsl(var(--shadow-color) / 0.32),
    64.4px 56.3px 99.4px -1.7px hsl(var(--shadow-color) / 0.33),
    87.9px 76.9px 135.8px -2px hsl(var(--shadow-color) / 0.34),
    118px 103.2px 182.2px -2.2px hsl(var(--shadow-color) / 0.34);
}

/* Exact same physical state normally, on hover and on keyboard focus. */
.media.frame-card,
.archive-thumb.frame-card,
.featured-media.frame-card,
.art-frame.frame-card,
.work:hover .media.frame-card,
.work:focus-within .media.frame-card,
.featured-media.frame-card:hover,
.featured-media.frame-card:focus-within,
.archive-item:hover .archive-thumb.frame-card,
.archive-item:focus-within .archive-thumb.frame-card,
.media.frame-card:hover,
.archive-thumb.frame-card:hover,
.art-frame.frame-card:hover{
  background:var(--frame-bg,linear-gradient(135deg,#c9b08a,#a27d56)) !important;
  border-color:var(--frame-border,rgba(80,62,36,.28)) !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,247,229,.24)),
    inset 0 -10px 16px rgba(0,0,0,.09),
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--frame-border,rgba(80,62,36,.28)) 78%,
      transparent
    ),
    var(--frame-wall-shadow)
    !important;
  transition:none !important;
}

/* Freeze artwork pixels too — this removes the white hover flash. */
.media.frame-card img,
.media.frame-card video,
.archive-thumb.frame-card img,
.archive-thumb.frame-card video,
.featured-media.frame-card img,
.featured-media.frame-card video,
.work:hover .media.frame-card img,
.work:hover .media.frame-card video,
.work:focus-within .media.frame-card img,
.work:focus-within .media.frame-card video,
.archive-item:hover .archive-thumb.frame-card img,
.archive-item:hover .archive-thumb.frame-card video{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transition:none !important;
  animation:none !important;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* No hover veil / white or pigment overlay over the image. */
.media.frame-card::after,
.featured-media.frame-card::after,
.work:hover .media.frame-card::after,
.featured-media.frame-card:hover::after{
  background:none !important;
  opacity:0 !important;
  mix-blend-mode:normal !important;
}

/* No positional hover reaction on the framed object. */
.work:hover .media.frame-card,
.work:focus-within .media.frame-card{
  transform:rotate(var(--tilt,0deg)) !important;
}

/* Detail uses the same single shadow system at a slightly larger scale. */
.lb-frame,
.lb-frame:hover,
.lb-frame.art-frame,
.lb-frame.art-frame:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.16),
    inset 0 -10px 16px rgba(0,0,0,.09),
    1.2px 1px 1.8px hsl(var(--shadow-color) / 0.26),
    7px 6px 11px -0.2px hsl(var(--shadow-color) / 0.27),
    13px 11px 20px -0.5px hsl(var(--shadow-color) / 0.28),
    20px 17px 30px -0.8px hsl(var(--shadow-color) / 0.29),
    29px 25px 43px -1px hsl(var(--shadow-color) / 0.30),
    42px 36px 61px -1.3px hsl(var(--shadow-color) / 0.31),
    59px 51px 86px -1.6px hsl(var(--shadow-color) / 0.31),
    82px 71px 119px -1.9px hsl(var(--shadow-color) / 0.32),
    112px 97px 162px -2.2px hsl(var(--shadow-color) / 0.33)
    !important;
  transition:none !important;
}

/* No extra ellipse underneath detail — only the frame's own cast shadow. */
.lb-stage::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   HOVER SHADOW HARD STOP
   The .work:hover parent selector had higher specificity than
   the previous no-hover override. This block wins that cascade.
========================================================= */

/* The wrapper around the physical frame must never create its own hover shadow. */
.work .media,
.work:hover .media,
.work:focus-within .media{
  transform:rotate(var(--tilt,0deg)) !important;
  border-color:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transition:none !important;
}

/* Kill the old pigment / hover veil on the media wrapper. */
.media::after,
.work .media::after,
.work:hover .media::after,
.work:focus-within .media::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  mix-blend-mode:normal !important;
  transition:none !important;
}

/* Exact same physical frame shadow even when the parent .work is hovered.
   This selector is intentionally more specific than the old
   .work:hover .art-frame rule. */
.art-frame.frame-card,
.work .art-frame.frame-card,
.work:hover .art-frame.frame-card,
.work:focus-within .art-frame.frame-card,
.archive-item .art-frame.frame-card,
.archive-item:hover .art-frame.frame-card,
.archive-item:focus-within .art-frame.frame-card,
.art-frame.frame-card:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,247,229,.24)),
    inset 0 -10px 16px rgba(0,0,0,.09),
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--frame-border,rgba(80,62,36,.28)) 78%,
      transparent
    ),
    var(--frame-wall-shadow)
    !important;

  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  transition:none !important;
}

/* Artwork pixels never react to hovering the work/caption. */
.work .media img,
.work .media video,
.work:hover .media img,
.work:hover .media video,
.work:focus-within .media img,
.work:focus-within .media video,
.archive-item img,
.archive-item video,
.archive-item:hover img,
.archive-item:hover video{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transition:none !important;
  animation:none !important;
}


/* =========================================================
   VIEWPORT LIGHT SOURCE — PER-FRAME SCROLL SHADOW
   The shadow reacts only to the frame's vertical position in
   the viewport. Hover / focus never changes it.
========================================================= */

/*
   JS writes --frame-scroll-shadow independently on each frame.
   If JS is disabled (or on touch devices), the existing static
   --frame-wall-shadow remains the fallback.
*/
.art-frame.frame-card,
.work .art-frame.frame-card,
.work:hover .art-frame.frame-card,
.work:focus-within .art-frame.frame-card,
.archive-item .art-frame.frame-card,
.archive-item:hover .art-frame.frame-card,
.archive-item:focus-within .art-frame.frame-card,
.featured-media.art-frame.frame-card,
.featured-media.art-frame.frame-card:hover,
.art-frame.frame-card:hover{
  box-shadow:
    inset 0 1px 0 var(--frame-highlight,rgba(255,247,229,.24)),
    inset 0 -10px 16px rgba(0,0,0,.09),
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--frame-border,rgba(80,62,36,.28)) 78%,
      transparent
    ),
    var(--frame-scroll-shadow,var(--frame-wall-shadow))
    !important;

  transition:none !important;
}

/* Keep the wrapper neutral in every parent-hover state. */
.work .media,
.work:hover .media,
.work:focus-within .media{
  box-shadow:none !important;
  filter:none !important;
  transition:none !important;
}

/* No visual hover reaction on the artwork itself. */
.work .media img,
.work .media video,
.work:hover .media img,
.work:hover .media video,
.work:focus-within .media img,
.work:focus-within .media video{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  transition:none !important;
}

/* On touch / reduced-motion, keep the static shadow. */
@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .art-frame.frame-card{
    --frame-scroll-shadow:var(--frame-wall-shadow) !important;
  }
}


/* =========================================================
   FRAMELESS / WALL ART PRESENTATION
   works.php: 'presentation' => 'wall'
========================================================= */

.wall-art{
  --art-ratio:4 / 3;
  --frame-fit:100%;
  position:relative;
  box-sizing:border-box;
  flex:0 0 auto;
  display:inline-block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  line-height:0;
}

.wall-art__surface{
  --art-ratio:4 / 3;
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--art-ratio);
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.wall-art__surface > img,
.wall-art__surface > video{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
  mix-blend-mode:normal !important;
}

.media > .wall-art.is-landscape{width:100% !important;}
.media > .wall-art.is-square{width:var(--frame-fit,88%) !important;}
.media > .wall-art.is-portrait{width:var(--frame-fit,66%) !important;}
.work.feature .media > .wall-art.is-square{width:min(var(--frame-fit,78%),920px) !important;}
.work.feature .media > .wall-art.is-portrait{width:min(var(--frame-fit,66%),680px) !important;}
.work.center .media > .wall-art{margin-left:auto !important;margin-right:auto !important;}
.work.right .media > .wall-art{margin-left:auto !important;margin-right:0 !important;}
.work.left .media > .wall-art{margin-left:0 !important;margin-right:auto !important;}

.work:hover .wall-art,
.work:focus-within .wall-art,
.wall-art:hover,
.work:hover .wall-art img,
.work:focus-within .wall-art img{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

.archive-thumb > .wall-art{width:100%;}
.archive-thumb > .wall-art.is-portrait{width:68%;}
.archive-thumb > .wall-art.is-square{width:86%;}

.single-work-art .wall-art{
  width:min(64vw,920px);
  max-width:100%;
}
.single-work-art .wall-art.is-portrait{width:min(44vw,620px);}
.single-work-art .wall-art.is-square{width:min(54vw,760px);}

.lightbox.frame-style-wall{
  background:
    radial-gradient(ellipse at 50% -4%,rgba(255,255,255,.55),transparent 34%),
    linear-gradient(180deg,#f2eee6 0%,#ece7dd 28%,#e7e1d6 100%) !important;
}
.wall-stage::after{content:none !important;display:none !important;}
.wall-art--detail{
  display:block;
  width:min(62vw,920px);
  max-width:100%;
  background:transparent !important;
  box-shadow:none !important;
}
.wall-art--detail.is-portrait{width:min(44vw,620px);}
.wall-art--detail.is-square{width:min(54vw,760px);}
.wall-art__surface--detail{
  width:100%;
  aspect-ratio:var(--art-ratio,4 / 3);
  background:transparent !important;
  box-shadow:none !important;
}
.wall-art__surface--detail > img,
.wall-art__surface--detail > video{
  object-fit:contain !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

.wall-art.is-unknown .wall-art__surface{aspect-ratio:4 / 3;}

@media(max-width:860px){
  .media > .wall-art.is-portrait{width:80% !important;}
  .media > .wall-art.is-square{width:94% !important;}
  .archive-thumb > .wall-art.is-portrait{width:76%;}
  .wall-art--detail,
  .wall-art--detail.is-portrait,
  .wall-art--detail.is-square,
  .single-work-art .wall-art,
  .single-work-art .wall-art.is-portrait,
  .single-work-art .wall-art.is-square{
    width:min(88vw,680px) !important;
  }
}


/* =========================================================
   AMBIENT WALL INSERTS
   works.php: 'ambient' => true
   Pure visual object in the shuffled exhibition grid:
   no frame, no caption, no detail interaction, no shadow.
========================================================= */

.work.is-ambient{
  --caption-frame-left:0px !important;
  --caption-frame-width:0px !important;
}

.work.is-ambient .caption{
  display:none !important;
}

.work.is-ambient .media,
.work.is-ambient:hover .media,
.work.is-ambient:focus-within .media{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

.work.is-ambient .media::before,
.work.is-ambient .media::after,
.work.is-ambient:hover .media::before,
.work.is-ambient:hover .media::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.work.is-ambient .work-link--static,
.work.is-ambient .work-link--static:hover,
.work.is-ambient .work-link--static:focus,
.work.is-ambient .work-link--static:focus-visible{
  display:block;
  cursor:default !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

.work.is-ambient .wall-art,
.work.is-ambient .wall-art__surface,
.work.is-ambient .wall-art img,
.work.is-ambient:hover .wall-art,
.work.is-ambient:hover .wall-art__surface,
.work.is-ambient:hover .wall-art img{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  transition:none !important;
}

/* The custom desktop cursor must not imply that ambient art is clickable. */
.work.is-ambient .media{cursor:default !important;}


/* =========================================================
   AMBIENT NATIVE SIZE — AUTHORITATIVE OVERRIDE
   Ambient artwork is NOT fitted to random frame/grid sizes.
   It renders at intrinsic pixel size and may only shrink when
   the current column/viewport is physically too narrow.
========================================================= */

/* Ambient still follows the random grid order/alignment, but never becomes
   a full-span "feature" presentation with artificial media height. */
.work.is-ambient,
.work.is-ambient.feature{
  width:100% !important;
  column-span:none !important;
}

.work.is-ambient.feature .media{
  height:auto !important;
}

/* Actual DOM:
   .media > .work-link--static > .wall-art
*/
.work.is-ambient .media{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  overflow:visible !important;
}

.work.is-ambient .media > .work-link--static{
  display:flex !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

.work.is-ambient.center .media > .work-link--static{
  justify-content:center !important;
}
.work.is-ambient.left .media > .work-link--static{
  justify-content:flex-start !important;
}
.work.is-ambient.right .media > .work-link--static{
  justify-content:flex-end !important;
}

/* Native width from PHP. max-width prevents horizontal overflow,
   but there is deliberately NO rule that enlarges a smaller PNG. */
.work.is-ambient .media > .work-link--static > .wall-art{
  flex:0 0 auto !important;
  width:var(--ambient-native-w,auto) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}

/* The surface reserves the native aspect ratio. */
.work.is-ambient .wall-art__surface{
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--art-ratio) !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Fill only the native-size wrapper; never scale beyond it. */
.work.is-ambient .wall-art__surface > img,
.work.is-ambient .wall-art__surface > video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* Ambient has no shadow or hover state under any circumstance. */
.work.is-ambient .media,
.work.is-ambient:hover .media,
.work.is-ambient:focus-within .media,
.work.is-ambient .wall-art,
.work.is-ambient:hover .wall-art,
.work.is-ambient .wall-art__surface,
.work.is-ambient:hover .wall-art__surface{
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

/* Mobile follows the same rule: keep native size unless it cannot fit.
   It is never enlarged to a mobile percentage. */
@media(max-width:860px){
  .work.is-ambient .media > .work-link--static > .wall-art{
    width:var(--ambient-native-w,auto) !important;
    max-width:100% !important;
  }
}


/* =========================================================
   DAMASK WALLPAPER BACKGROUND
   Repeating user-supplied pattern used as the gallery wall.
========================================================= */

:root{
  --wallpaper-size:820px;
  --wallpaper-base:#f4f0e7;
}

/* Main exhibition wall */
.site{
  background-color:var(--wallpaper-base) !important;
  background-image:url("../img/wallpaper.png") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:var(--wallpaper-size) var(--wallpaper-size) !important;
  background-blend-mode:multiply !important;
}

/* Keep the old generative studio marks extremely subtle over the wallpaper. */
.surface-layer{
  opacity:.20 !important;
}

/* Reduce the previous paper/stain overlays so the damask remains readable. */
body::before{
  opacity:.30 !important;
}
body::after{
  opacity:.025 !important;
}

/* Detail view uses the same wall, so framed works feel like the same room. */
.lightbox,
.lightbox.frame-style-baroque,
.lightbox.frame-style-museum,
.lightbox.frame-style-antique,
.lightbox.frame-style-gesso,
.lightbox.frame-style-brass,
.lightbox.frame-style-studio,
.lightbox.frame-style-wall{
  background-color:var(--wallpaper-base) !important;
  background-image:url("../img/wallpaper.png") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:var(--wallpaper-size) var(--wallpaper-size) !important;
  background-blend-mode:multiply !important;
}

/* Let the supplied wallpaper be the wall texture in detail too. */
.lightbox::before{
  opacity:.16 !important;
}

@media(max-width:860px){
  :root{
    --wallpaper-size:620px;
  }
}


/* =========================================================
   WALLPAPER NATIVE SIZE FIX
   Keep the supplied 1254 × 1254 px tile at its original size.
========================================================= */

:root{
  --wallpaper-size:1254px !important;
}

.site,
.lightbox,
.lightbox.frame-style-baroque,
.lightbox.frame-style-museum,
.lightbox.frame-style-antique,
.lightbox.frame-style-gesso,
.lightbox.frame-style-brass,
.lightbox.frame-style-studio,
.lightbox.frame-style-wall{
  background-size:1254px 1254px !important;
}

/* Do NOT resize the wallpaper tile on mobile. */
@media(max-width:860px){
  :root{
    --wallpaper-size:1254px !important;
  }

  .site,
  .lightbox,
  .lightbox.frame-style-baroque,
  .lightbox.frame-style-museum,
  .lightbox.frame-style-antique,
  .lightbox.frame-style-gesso,
  .lightbox.frame-style-brass,
  .lightbox.frame-style-studio,
  .lightbox.frame-style-wall{
    background-size:1254px 1254px !important;
  }
}


/* =========================================================
   FIXED DENSE EXHIBITION + 500px WALLPAPER
========================================================= */

/* Exhibition mode UI is retired. Keep these hidden as a safety net
   in case an older cached index.php is briefly served. */
.mode-chip,
.intro-top,
.scroll-note{
  display:none !important;
}

/* The uploaded wallpaper tile is 500 × 500 px and must stay that size. */
:root{
  --wallpaper-size:500px !important;
}

.site,
.lightbox,
.lightbox.frame-style-baroque,
.lightbox.frame-style-museum,
.lightbox.frame-style-antique,
.lightbox.frame-style-gesso,
.lightbox.frame-style-brass,
.lightbox.frame-style-studio,
.lightbox.frame-style-wall{
  background-size:500px 500px !important;
}

@media(max-width:860px){
  :root{
    --wallpaper-size:500px !important;
  }

  .site,
  .lightbox,
  .lightbox.frame-style-baroque,
  .lightbox.frame-style-museum,
  .lightbox.frame-style-antique,
  .lightbox.frame-style-gesso,
  .lightbox.frame-style-brass,
  .lightbox.frame-style-studio,
  .lightbox.frame-style-wall{
    background-size:500px 500px !important;
  }
}

/* The retired checker-textured museum family is no longer assigned.
   This fallback makes any stale museum markup visually identical to
   the quiet studio-wood family until the manifest rebuild completes. */
.frame-museum,
.art-frame.frame-museum{
  --frame-bg:linear-gradient(
    135deg,
    #2a1e18 0%,
    #5f4434 18%,
    #8a674f 34%,
    #4a3529 54%,
    #765844 76%,
    #2f231d 100%
  ) !important;
  --frame-border:rgba(49,34,25,.82) !important;
  --frame-highlight:rgba(236,214,187,.16) !important;
  --frame-inner-shadow:rgba(0,0,0,.24) !important;
  --frame-line:rgba(98,73,54,.40) !important;
  --frame-line2:rgba(240,228,210,.10) !important;
  --mat-bg:#ece5d8 !important;
  background-image:var(--frame-bg) !important;
}

.art-frame.frame-museum::before,
.frame-museum::before{
  inset:7px !important;
  border:2px solid rgba(84,65,51,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,223,.10),
    inset 0 -3px 8px rgba(0,0,0,.13) !important;
}

.art-frame.frame-museum::after,
.frame-museum::after{
  content:"" !important;
  display:block !important;
  inset:15px !important;
  border:1px solid rgba(255,245,236,.12) !important;
  box-shadow:none !important;
}

.art-frame.frame-museum > .art-frame__mount,
.media > .frame-museum > .frame-opening,
.frame-museum .lb-art{
  --mount-bg:#ece4d8 !important;
  background:#ece4d8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.18),
    inset 0 0 0 8px rgba(244,234,223,.48) !important;
}


/* =========================================================
   RETIRE CHECKER / MUSEUM FRAME — HARD FINAL OVERRIDE
   No stale markup or cache can show the old textured family.
========================================================= */

.frame-museum,
.art-frame.frame-museum,
.media > .frame-card.frame-museum{
  --frame-bg:linear-gradient(
    135deg,
    #2a1e18 0%,
    #5f4434 18%,
    #8a674f 34%,
    #4a3529 54%,
    #765844 76%,
    #2f231d 100%
  ) !important;
  --frame-border:rgba(49,34,25,.82) !important;
  --frame-highlight:rgba(236,214,187,.16) !important;
  --frame-inner-shadow:rgba(0,0,0,.24) !important;
  --frame-line:rgba(98,73,54,.40) !important;
  --frame-line2:rgba(240,228,210,.10) !important;
  --mat-bg:#ece5d8 !important;

  /* Important: reset the whole shorthand so no earlier
     repeating-linear-gradient can survive in the cascade. */
  background:linear-gradient(
    135deg,
    #2a1e18 0%,
    #5f4434 18%,
    #8a674f 34%,
    #4a3529 54%,
    #765844 76%,
    #2f231d 100%
  ) !important;
  background-image:linear-gradient(
    135deg,
    #2a1e18 0%,
    #5f4434 18%,
    #8a674f 34%,
    #4a3529 54%,
    #765844 76%,
    #2f231d 100%
  ) !important;
  background-size:auto !important;
}

.art-frame.frame-museum::before,
.frame-museum::before,
.media > .frame-card.frame-museum::before{
  inset:7px !important;
  border:1px solid rgba(92,71,53,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,232,.08),
    inset 0 -2px 4px rgba(0,0,0,.10)
    !important;
  background:none !important;
}

.art-frame.frame-museum::after,
.frame-museum::after,
.media > .frame-card.frame-museum::after{
  inset:12px !important;
  border:1px solid rgba(130,100,76,.18) !important;
  background:none !important;
  box-shadow:none !important;
}

.art-frame.frame-museum > .art-frame__mount,
.media > .frame-museum > .frame-opening,
.frame-museum .lb-art{
  --mount-bg:#ece4d8 !important;
  background:#ece4d8 !important;
  background-image:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(104,82,64,.18),
    inset 0 0 0 8px rgba(244,234,223,.48)
    !important;
}


/* =========================================================
   AMBIENT OBJECTS — 100% MULTIPLY
   Ambient PNGs blend directly into the wallpaper/background.
========================================================= */

.work.is-ambient,
.work.is-ambient .media,
.work.is-ambient .work-link--static,
.work.is-ambient .wall-art,
.work.is-ambient .wall-art__surface{
  background:transparent !important;
  isolation:auto !important;
}

.work.is-ambient .wall-art__surface > img,
.work.is-ambient .wall-art__surface > video{
  mix-blend-mode:multiply !important;
  opacity:1 !important;
  filter:none !important;
}

/* Hover/focus must never alter the blend. */
.work.is-ambient:hover .wall-art__surface > img,
.work.is-ambient:focus-within .wall-art__surface > img,
.work.is-ambient:hover .wall-art__surface > video,
.work.is-ambient:focus-within .wall-art__surface > video{
  mix-blend-mode:multiply !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}


/* =========================================================
   05 — LIGHT ASH / BLEACHED OAK
   Brass is retired completely.
   Light matte timber with a restrained bevel and warm museum mount.
========================================================= */

/* New family. No metallic/gold treatment and no repetitive checker texture. */
.frame-ash,
.art-frame.frame-ash{
  --frame-bg:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.22) 0 7%, transparent 30%),
    radial-gradient(ellipse at 82% 92%, rgba(96,75,56,.08) 0 8%, transparent 30%),
    linear-gradient(
      132deg,
      #e3d6c5 0%,
      #cdbca7 15%,
      #efe5d7 31%,
      #bca88f 49%,
      #dac9b5 67%,
      #f0e6d9 82%,
      #c5b29c 100%
    ) !important;

  --frame-border:rgba(111,91,70,.52) !important;
  --frame-highlight:rgba(255,255,255,.38) !important;
  --frame-inner-shadow:rgba(92,70,51,.13) !important;
  --frame-line:rgba(132,108,83,.28) !important;
  --frame-line2:rgba(255,255,255,.24) !important;
  --mat-bg:#f3ede4 !important;

  background:var(--frame-bg) !important;
  background-size:100% 100% !important;
}

/* Slightly slimmer than the dark wood families. */
.art-frame.frame-ash{
  --frame-depth:clamp(18px,1.55vw,25px) !important;
}

/* Outer bevel: a tiny highlight above, natural recess below. */
.art-frame.frame-ash::before,
.frame-ash::before{
  inset:6px !important;
  border:1px solid rgba(130,106,81,.30) !important;
  background:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -4px 8px rgba(78,58,42,.10),
    inset 1px 0 0 rgba(255,255,255,.13),
    inset -1px 0 0 rgba(75,55,40,.07)
    !important;
}

/* Fine inner lip rather than decorative metal linework. */
.art-frame.frame-ash::after,
.frame-ash::after{
  content:"" !important;
  display:block !important;
  inset:13px !important;
  border:1px solid rgba(109,88,68,.16) !important;
  background:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(73,53,38,.08)
    !important;
}

.art-frame.frame-ash > .art-frame__mount,
.media > .frame-ash > .frame-opening,
.frame-ash .lb-art{
  --mount-depth:clamp(16px,1.35vw,23px) !important;
  --mount-bg:#f3ede4 !important;
  padding:var(--mount-depth) !important;
  background:#f3ede4 !important;
  background-image:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(116,101,84,.12),
    inset 0 0 0 8px rgba(255,255,255,.34),
    inset 0 -14px 20px -18px rgba(72,52,37,.12)
    !important;
}

/* Calibrated shadow depth: light timber reads shallower than dark walnut. */
.art-frame.frame-ash{
  --family-x-extra:-1px;
  --family-y-extra:-1px;
  --family-blur-extra:6px;
  --family-spread:-17px;
  --family-contact-opacity:.11;
  --family-main-opacity:.21;
  --family-penumbra-opacity:.13;
  --family-tail-opacity:.05;
}

/* Detail room remains the same wallpaper/wall as every other work. */
.lightbox.frame-style-ash{
  background-color:var(--wallpaper-base,#f4f0e7) !important;
  background-image:url("../img/wallpaper.png") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:500px 500px !important;
  background-blend-mode:multiply !important;
}

/* ---------------------------------------------------------
   HARD LEGACY FALLBACK
   Any old frame-brass markup is made visually identical to ash.
   It can therefore never display as brass again while caches expire.
--------------------------------------------------------- */
.frame-brass,
.art-frame.frame-brass{
  --frame-bg:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.22) 0 7%, transparent 30%),
    radial-gradient(ellipse at 82% 92%, rgba(96,75,56,.08) 0 8%, transparent 30%),
    linear-gradient(
      132deg,
      #e3d6c5 0%,
      #cdbca7 15%,
      #efe5d7 31%,
      #bca88f 49%,
      #dac9b5 67%,
      #f0e6d9 82%,
      #c5b29c 100%
    ) !important;
  --frame-border:rgba(111,91,70,.52) !important;
  --frame-highlight:rgba(255,255,255,.38) !important;
  --frame-inner-shadow:rgba(92,70,51,.13) !important;
  --frame-line:rgba(132,108,83,.28) !important;
  --frame-line2:rgba(255,255,255,.24) !important;
  --mat-bg:#f3ede4 !important;
  background:var(--frame-bg) !important;
  background-size:100% 100% !important;
}

.art-frame.frame-brass::before,
.frame-brass::before{
  inset:6px !important;
  border:1px solid rgba(130,106,81,.30) !important;
  background:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -4px 8px rgba(78,58,42,.10),
    inset 1px 0 0 rgba(255,255,255,.13),
    inset -1px 0 0 rgba(75,55,40,.07)
    !important;
}

.art-frame.frame-brass::after,
.frame-brass::after{
  inset:13px !important;
  border:1px solid rgba(109,88,68,.16) !important;
  background:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(73,53,38,.08)
    !important;
}

.art-frame.frame-brass > .art-frame__mount,
.media > .frame-brass > .frame-opening,
.frame-brass .lb-art{
  --mount-depth:clamp(16px,1.35vw,23px) !important;
  --mount-bg:#f3ede4 !important;
  background:#f3ede4 !important;
  background-image:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(116,101,84,.12),
    inset 0 0 0 8px rgba(255,255,255,.34),
    inset 0 -14px 20px -18px rgba(72,52,37,.12)
    !important;
}


/* =========================================================
   GRID TITLE COLOR = DESCRIPTION COLOR
========================================================= */

/* Artwork title + year use the same tone as the factual/descriptive text. */
.object-label--grid .object-label__title,
.work .object-label__title,
.object-label--grid .object-label__year,
.work .object-label__year{
  color:#6f6962 !important;
}

/* Keep the existing subtle hover accent. */
.work:hover .object-label__title,
.work:hover .object-label__year{
  color:#7b695e !important;
}


/* =========================================================
   AMBIENT MULTIPLY — HARD / RELIABLE VERSION
   Blend the whole ambient media group with the wallpaper.
   This avoids the transformed .media stacking context trapping
   mix-blend-mode when it is applied only to the inner <img>.
========================================================= */

.work.is-ambient .media,
.work.is-ambient:hover .media,
.work.is-ambient:focus-within .media{
  background:transparent !important;
  mix-blend-mode:multiply !important;
  isolation:auto !important;
  opacity:1 !important;
  filter:none !important;
}

/* The whole media group blends once. Children stay normal to avoid
   double-multiplication and browser-specific compositing differences. */
.work.is-ambient .work-link--static,
.work.is-ambient .wall-art,
.work.is-ambient .wall-art__surface,
.work.is-ambient .wall-art__surface > img,
.work.is-ambient .wall-art__surface > video{
  background:transparent !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:none !important;
}

/* No interaction may change the blend. */
.work.is-ambient:hover .wall-art__surface > img,
.work.is-ambient:focus-within .wall-art__surface > img,
.work.is-ambient:hover .wall-art__surface > video,
.work.is-ambient:focus-within .wall-art__surface > video{
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}


/* =========================================================
   AMBIENT MULTIPLY — BACKDROP FIX
   The exhibition had z-index:1 from `.site > section`, which creates
   a stacking context. That prevented the ambient image from blending
   with the wallpaper painted on `.site`.
========================================================= */

/* Let exhibition contents blend with the actual .site wallpaper. */
.site > .exhibition,
.exhibition{
  z-index:auto !important;
  isolation:auto !important;
  background:transparent !important;
}

/* Keep the layout wrappers fully transparent and non-isolating. */
.work.is-ambient,
.work.is-ambient .media,
.work.is-ambient .work-link--static,
.work.is-ambient .wall-art,
.work.is-ambient .wall-art__surface{
  background:transparent !important;
  isolation:auto !important;
}

/* Multiply must live on the actual pixels, not on the wrapper group. */
.work.is-ambient .media{
  mix-blend-mode:normal !important;
}

.work.is-ambient .wall-art__surface > img,
.work.is-ambient .wall-art__surface > video{
  mix-blend-mode:multiply !important;
  opacity:1 !important;
  filter:none !important;
}

/* Keep it identical on hover/focus. */
.work.is-ambient:hover .wall-art__surface > img,
.work.is-ambient:focus-within .wall-art__surface > img,
.work.is-ambient:hover .wall-art__surface > video,
.work.is-ambient:focus-within .wall-art__surface > video{
  mix-blend-mode:multiply !important;
  opacity:1 !important;
  filter:none !important;
}


/* =========================================================
   REMOVE STATIC VIDEO "PLAY" TAG
   The old marker was emitted by templates/media.php for every
   gallery video and therefore moved whenever the shuffled work moved.
========================================================= */
.media-mark{
  display:none !important;
}