@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --cream:#f7f3ee; --paper:#fbf8f3; --ink:#111110; --muted:#6d665d; --line:rgba(17,17,16,.16);
  --red:#7c1e17; --ember:#c6411e; --gold:#d7bd37; --night:#111214; --panel-dark:#171818;
  --stone:#c9c2b5; --cool:#60757c; --accent:#c6411e; --hero-bg:#f1ebe2; --wall:#f7f3ee;
  --title-font:'Oxanium',system-ui,sans-serif; --body-font:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:var(--body-font)} a{color:inherit;text-decoration:none}
.vrf-header{height:84px;padding:0 54px;display:grid;grid-template-columns:430px 1fr 320px;align-items:center;border-bottom:1px solid var(--line);background:rgba(251,248,243,.92);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}
.identity-lockup{display:flex;align-items:center;gap:22px;min-width:0}.identity-lockup img{width:225px;height:auto;display:block}.identity-lockup .subtitle{font-family:var(--title-font);font-size:11px;letter-spacing:.36em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:.72}
.nav{display:flex;justify-content:center;gap:58px;font-family:var(--title-font);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}.nav a{opacity:.72;position:relative}.nav a.active,.nav a:hover{opacity:1}.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--ink)}
.location{text-align:right;font-family:var(--title-font);font-size:12px;line-height:1.5}.location strong{display:block}.location span{color:var(--muted)}
.hero{position:relative;min-height:calc(100vh - 84px);display:grid;grid-template-columns:36% 64%;background:radial-gradient(circle at 12% 15%,rgba(196,65,30,.07),transparent 25%),linear-gradient(90deg,var(--paper) 0%,var(--hero-bg) 100%);overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(17,17,16,.035) 1px,transparent 1px),linear-gradient(rgba(17,17,16,.025) 1px,transparent 1px);background-size:96px 96px;mask-image:linear-gradient(90deg,black,transparent 70%);pointer-events:none}
.hero-meta{position:relative;padding:112px 64px 80px 78px;display:flex;flex-direction:column;justify-content:center;z-index:2}.kicker{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.34em;font-size:12px;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:16px}.kicker::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block}
.hero-title{font-family:var(--title-font);font-weight:600;text-transform:uppercase;letter-spacing:.20em;font-size:clamp(46px,5.4vw,90px);line-height:1.08;margin:36px 0 24px;max-width:680px}.hero-sub{font-family:var(--title-font);letter-spacing:.30em;text-transform:uppercase;font-size:14px;line-height:1.8;color:var(--ink);margin-bottom:28px}.hero-desc{max-width:430px;color:var(--muted);line-height:1.8;font-size:16px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:42px}
.btn-primary{border:0;background:var(--ink);color:var(--paper);font-family:var(--title-font);letter-spacing:.26em;text-transform:uppercase;padding:20px 36px;font-size:12px;cursor:pointer;box-shadow:12px 12px 0 rgba(17,17,16,.10)}.link-arrow{font-family:var(--title-font);letter-spacing:.18em;text-transform:uppercase;font-size:12px;border-bottom:1px solid currentColor;padding-bottom:8px}
.hero-art-stage{position:relative;min-height:760px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:70px 64px 90px 0}.hero-art-wrap{position:relative;width:min(88%,1050px);height:min(72vh,740px);display:flex;align-items:center;justify-content:center}.hero-art-wrap::before{content:"";position:absolute;inset:10% -8% 8% 8%;background:var(--accent);opacity:.16;filter:blur(44px);transform:rotate(-1deg)}.hero-art{position:relative;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;box-shadow:18px 22px 0 rgba(17,17,16,.18);border:2px solid var(--ink);background:var(--paper)}
.palette-panel{position:absolute;right:44px;top:50%;transform:translateY(-50%);background:rgba(17,18,18,.92);color:var(--paper);padding:18px 14px;border-radius:14px;display:grid;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.25);z-index:3}.palette-panel .small{font-family:var(--title-font);letter-spacing:.20em;text-transform:uppercase;font-size:9px;line-height:1.6;color:rgba(251,248,243,.7);padding:0 4px}.palette-dot{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);cursor:pointer}.palette-dot.active{outline:2px solid var(--paper);outline-offset:4px}
.dark-strip{background:var(--panel-dark);color:var(--paper);padding:34px 74px 42px;border-bottom:1px solid rgba(255,255,255,.08)}.section-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--title-font);letter-spacing:.34em;text-transform:uppercase;font-size:13px;margin-bottom:22px}.section-head .accent{color:var(--gold)}
.recent-track{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:22px;align-items:end}.recent-card{cursor:pointer}.recent-card img{width:100%;aspect-ratio:1/1.18;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.16)}.recent-card:nth-child(3) img{aspect-ratio:1/1.35}.recent-card:nth-child(5) img{aspect-ratio:1.35/1}.recent-title{margin-top:14px;font-family:var(--title-font);letter-spacing:.18em;text-transform:uppercase;font-size:12px}.recent-meta{margin-top:6px;color:rgba(251,248,243,.55);font-size:12px}
.collections{padding:54px 74px 80px;background:var(--cream);position:relative}.collection-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.collection-card{display:grid;grid-template-columns:42% 58%;min-height:130px;border:1px solid var(--line);background:rgba(251,248,243,.62);overflow:hidden}.collection-info{padding:22px}.collection-number{font-family:var(--title-font);font-size:30px;font-weight:700;margin-bottom:16px}.collection-title{font-family:var(--title-font);letter-spacing:.24em;text-transform:uppercase;font-size:13px;line-height:1.45}.collection-meta{margin-top:18px;color:var(--muted);font-size:12px}.collection-card img{width:100%;height:100%;object-fit:cover}
.page{padding:86px 74px 100px}.page-title{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.18em;font-size:58px;margin:0 0 18px}.page-intro{color:var(--muted);max-width:680px;line-height:1.8}.works-masonry{margin-top:58px;column-count:4;column-gap:32px}.work-tile{break-inside:avoid;margin:0 0 36px}.work-tile img{width:100%;height:auto;display:block;border:1px solid var(--line)}.work-tile h3{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.16em;font-size:14px;margin:14px 0 4px}.work-tile p{margin:0;color:var(--muted);font-size:13px}
.viewer{min-height:calc(100vh - 84px);background:var(--wall);display:grid;grid-template-columns:360px 1fr 150px;gap:32px;padding:72px 58px}.viewer-meta{color:var(--paper)}.viewer-meta h1{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.18em;font-size:42px;margin:32px 0 18px}.viewer-meta p{line-height:1.7;color:rgba(251,248,243,.72)}.viewer-art{display:flex;align-items:center;justify-content:center}.viewer-art img{max-width:100%;max-height:calc(100vh - 220px);width:auto;height:auto;display:block;background:var(--paper);border:18px solid var(--paper);box-shadow:20px 24px 0 rgba(0,0,0,.18)}.viewer-palette{display:grid;gap:12px;background:rgba(17,18,18,.88);border-radius:16px;padding:18px 14px}
.footer{padding:22px 74px;background:var(--panel-dark);color:rgba(251,248,243,.62);display:flex;justify-content:space-between;font-family:var(--title-font);letter-spacing:.18em;text-transform:uppercase;font-size:10px}
.admin-page{padding:46px 64px 90px}.admin-grid{display:grid;grid-template-columns:420px 1fr;gap:36px;align-items:start}.admin-panel{background:var(--paper);border:1px solid var(--line);padding:24px}.admin-panel h2{margin:0 0 18px;font-family:var(--title-font);letter-spacing:.18em;text-transform:uppercase}.admin-panel p{color:var(--muted);line-height:1.7}.admin-panel input,.admin-panel select,.admin-panel textarea{width:100%;padding:12px;border:1px solid var(--line);background:white;margin:8px 0 14px}.admin-actions{display:flex;gap:12px;flex-wrap:wrap}.admin-actions button,.admin-panel .button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 16px;cursor:pointer;font-family:var(--title-font);letter-spacing:.12em;text-transform:uppercase;font-size:11px;display:inline-block}.admin-list{display:grid;gap:14px}.admin-card{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:var(--paper);padding:10px}.admin-card img{width:78px;height:78px;object-fit:cover}.admin-card strong{display:block;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.12em;font-size:13px}.admin-card span{display:block;color:var(--muted);font-size:12px;margin-top:6px}.admin-card button{border:1px solid var(--line);background:transparent;padding:9px 12px;cursor:pointer}
.message{padding:12px 14px;margin:12px 0;border-left:4px solid var(--accent);background:rgba(196,65,30,.08)}
@media(max-width:900px){.vrf-header{height:76px;padding:0 22px;grid-template-columns:1fr 42px}.identity-lockup{gap:14px}.identity-lockup img{width:180px}.identity-lockup .subtitle{font-size:8px;letter-spacing:.25em}.nav,.location{display:none}.vrf-header::after{content:"☰";font-size:28px;text-align:right}.hero{grid-template-columns:1fr}.hero-meta{padding:46px 32px 22px}.hero-title{font-size:46px}.hero-art-stage{min-height:auto;padding:20px 32px 44px}.hero-art-wrap{height:auto;width:100%}.hero-art{max-height:62vh}.palette-panel{position:static;transform:none;display:flex;margin:18px 32px 34px;border-radius:10px}.recent-track{grid-template-columns:repeat(3,1fr)}.dark-strip,.collections,.page{padding-left:32px;padding-right:32px}.collection-grid{grid-template-columns:1fr}.works-masonry{column-count:2}.viewer{grid-template-columns:1fr;padding:34px 24px}.viewer-meta{color:var(--ink)}.viewer-meta p{color:var(--muted)}.admin-grid{grid-template-columns:1fr}}


/* v1.1 header identity patch */
.vrf-header {
  grid-template-columns: 310px minmax(420px, 1fr) 320px;
}
.identity-lockup {
  gap: 0;
}
.identity-lockup img {
  width: 245px;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}
.identity-lockup .subtitle {
  display: none !important;
}
.home-art-line {
  font-family: var(--title-font);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 26px;
  opacity: .86;
}
.home-art-line::after {
  content: "";
  display: block;
  width: 86px;
  height: 2px;
  background: var(--accent);
  margin-top: 16px;
}
@media(max-width: 1180px) {
  .vrf-header {
    grid-template-columns: 270px 1fr 230px;
    padding-left: 34px;
    padding-right: 34px;
  }
  .identity-lockup img {
    width: 215px;
  }
  .nav {
    gap: 32px;
  }
}
@media(max-width:900px) {
  .vrf-header {
    grid-template-columns: 1fr 42px;
  }
  .identity-lockup img {
    width: 190px;
    max-height: 48px;
  }
}


/* v1.2 floating logo + smaller featured image patch */
.vrf-header {
  grid-template-columns: 300px minmax(420px, 1fr) 320px;
}
.identity-lockup {
  gap: 0 !important;
  align-items: center;
}
.identity-lockup img {
  width: 235px !important;
  max-height: 58px !important;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter:
    drop-shadow(0 8px 7px rgba(17,17,16,.18))
    drop-shadow(0 1px 0 rgba(255,255,255,.5));
}
.identity-lockup .subtitle {
  display: none !important;
}

/* The user requested featured image display reduced by 50%.
   Original: width min(88%,1050px), height min(72vh,740px).
   New: width min(44%,525px), height min(36vh,370px). */
.hero-art-wrap {
  width: min(44%, 525px) !important;
  height: min(36vh, 370px) !important;
}
.hero-art {
  box-shadow: 10px 12px 0 rgba(17,17,16,.16) !important;
}
.hero-art-stage {
  justify-content: center;
  padding-right: 64px;
}

/* Palette should not overwhelm the now-smaller feature image. */
.palette-panel {
  right: 46px;
  transform: translateY(-50%) scale(.82);
  transform-origin: right center;
}

@media(max-width:1180px) {
  .vrf-header {
    grid-template-columns: 260px 1fr 250px;
    padding-left: 34px;
    padding-right: 34px;
  }
  .identity-lockup img {
    width: 205px !important;
  }
  .nav {
    gap: 30px;
  }
}
@media(max-width:900px) {
  .vrf-header {
    grid-template-columns: 1fr 42px;
  }
  .identity-lockup img {
    width: 180px !important;
    max-height: 48px !important;
  }
  .hero-art-wrap {
    width: min(70%, 360px) !important;
    height: min(40vh, 380px) !important;
  }
  .palette-panel {
    transform: none;
  }
}


/* v1.3 shorter featured section patch
   Goal: reduce the featured/hero area by about 30% so Recent Works is visible sooner.
   This changes section height, not database/content behavior. */

.hero {
  min-height: calc((100vh - 84px) * .70) !important;
}

.hero-meta {
  padding-top: 56px !important;
  padding-bottom: 46px !important;
  justify-content: center;
}

.hero-title {
  font-size: clamp(38px, 4.2vw, 66px) !important;
  margin-top: 24px !important;
  margin-bottom: 18px !important;
}

.hero-sub {
  margin-bottom: 18px !important;
}

.hero-desc {
  line-height: 1.62 !important;
}

.hero-actions {
  margin-top: 30px !important;
}

.hero-art-stage {
  min-height: 532px !important; /* 760px reduced by 30% */
  padding-top: 38px !important;
  padding-bottom: 48px !important;
}

.hero-art-wrap {
  height: min(30vh, 330px) !important;
}

.palette-panel {
  top: 48% !important;
}

.dark-strip {
  padding-top: 28px !important;
}

@media(max-width:900px) {
  .hero {
    min-height: auto !important;
  }
  .hero-meta {
    padding-top: 34px !important;
    padding-bottom: 18px !important;
  }
  .hero-title {
    font-size: 38px !important;
  }
  .hero-art-stage {
    min-height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 28px !important;
  }
  .hero-art-wrap {
    height: min(34vh, 300px) !important;
  }
}


/* v1.4 clean floating logo + featured image +40% patch */
.identity-lockup img {
  width: 230px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter:
    drop-shadow(0 7px 7px rgba(17,17,16,.18))
    drop-shadow(0 1px 0 rgba(255,255,255,.55)) !important;
}
.identity-lockup .subtitle {
  display: none !important;
}

/* Increase featured image by 40% from v1.3 reduced size.
   v1.3: width min(44%,525px), height min(30vh,330px)
   v1.4: width min(61.6%,735px), height min(42vh,462px) */
.hero-art-wrap {
  width: min(61.6%, 735px) !important;
  height: min(42vh, 462px) !important;
}
.hero-art-stage {
  min-height: 532px !important;
  padding-top: 30px !important;
  padding-bottom: 42px !important;
}
.hero-art {
  box-shadow: 14px 16px 0 rgba(17,17,16,.16) !important;
}
.palette-panel {
  transform: translateY(-50%) scale(.82) !important;
  transform-origin: right center;
}

@media(max-width:1180px) {
  .identity-lockup img {
    width: 205px !important;
    max-height: 48px !important;
  }
  .hero-art-wrap {
    width: min(64%, 620px) !important;
    height: min(40vh, 420px) !important;
  }
}
@media(max-width:900px) {
  .identity-lockup img {
    width: 180px !important;
    max-height: 44px !important;
  }
  .hero-art-wrap {
    width: min(84%, 430px) !important;
    height: min(38vh, 350px) !important;
  }
  .palette-panel {
    transform: none !important;
  }
}


/* v1.5 artistic homepage + featured image +20%
   Goal: move closer to the approved concept board:
   - stronger art field
   - larger featured artwork
   - less card/box feeling
   - artwork integrated into hero area
   - PHP/MySQL/admin unchanged
*/

/* Keep the top section shorter than original, but give the artwork more presence. */
.hero {
  min-height: calc((100vh - 84px) * .76) !important;
  grid-template-columns: 34% 66% !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(196,65,30,.07), transparent 26%),
    radial-gradient(circle at 88% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    linear-gradient(90deg, var(--paper) 0%, var(--hero-bg) 52%, rgba(226,232,228,.72) 100%) !important;
}

/* faint technical/field texture like the concept, without using fake images */
.hero::before {
  opacity: .75;
  background-image:
    linear-gradient(90deg, rgba(17,17,16,.042) 1px, transparent 1px),
    linear-gradient(rgba(17,17,16,.030) 1px, transparent 1px),
    radial-gradient(circle at 5% 48%, rgba(17,17,16,.075) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 72%, rgba(196,65,30,.12) 0 1px, transparent 2px) !important;
  background-size: 96px 96px, 96px 96px, 180px 180px, 240px 240px !important;
}

/* visual vertical signal line on the left, closer to approved concept */
.hero-meta::before {
  content: "";
  position: absolute;
  left: 58px;
  top: 72px;
  bottom: 56px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(17,17,16,.22), rgba(17,17,16,.04));
}
.hero-meta::after {
  content: "";
  position: absolute;
  left: 54px;
  top: 205px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 96px 0 rgba(17,17,16,.42),
    0 192px 0 rgba(17,17,16,.28);
}

.hero-meta {
  padding-top: 58px !important;
  padding-bottom: 48px !important;
  padding-left: 84px !important;
}

/* Bring typography closer to concept: tighter, technical, deliberate. */
.home-art-line {
  margin-bottom: 22px !important;
  letter-spacing: .32em !important;
}
.hero-title {
  font-size: clamp(42px, 4.6vw, 74px) !important;
  line-height: 1.05 !important;
  letter-spacing: .24em !important;
}
.hero-sub {
  letter-spacing: .34em !important;
}
.hero-desc {
  max-width: 460px !important;
}

/* Increase featured image by another 20% from v1.4.
   v1.4: width min(61.6%,735px), height min(42vh,462px)
   v1.5: width min(73.9%,882px), height min(50.4vh,554px) */
.hero-art-stage {
  min-height: 610px !important;
  padding-top: 24px !important;
  padding-bottom: 38px !important;
  padding-right: 70px !important;
  justify-content: center !important;
  overflow: hidden;
}

.hero-art-wrap {
  width: min(73.9%, 882px) !important;
  height: min(50.4vh, 554px) !important;
}

/* Less boxed: keep a fine edge, remove heavy card feeling, add field glow */
.hero-art-wrap::before {
  inset: -10% -12% -8% 14% !important;
  background:
    radial-gradient(circle at 42% 48%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 46%),
    radial-gradient(circle at 72% 32%, rgba(17,17,16,.16), transparent 38%) !important;
  opacity: .55 !important;
  filter: blur(52px) !important;
  transform: rotate(-1deg) !important;
}

.hero-art {
  border: 1px solid rgba(17,17,16,.78) !important;
  box-shadow:
    16px 18px 0 rgba(17,17,16,.16),
    0 24px 80px rgba(17,17,16,.12) !important;
}

/* Add subtle soft mask on artwork edge so it does not feel like a generic card.
   Uses widely supported mask where available. */
@supports (-webkit-mask-image: linear-gradient(black, transparent)) {
  .hero-art {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, black 5%, black 97%, transparent 100%),
      linear-gradient(180deg, transparent 0%, black 5%, black 97%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, black 5%, black 97%, transparent 100%),
      linear-gradient(180deg, transparent 0%, black 5%, black 97%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Move palette closer to concept: compact, tool-like, not dominant */
.palette-panel {
  right: 34px !important;
  top: 51% !important;
  transform: translateY(-50%) scale(.78) !important;
  border-radius: 13px !important;
  padding: 17px 13px !important;
}

/* Dark strip rises visually like approved concept */
.dark-strip {
  margin-top: -1px;
  padding-top: 28px !important;
  background:
    linear-gradient(180deg, rgba(20,21,21,.98), rgba(15,16,16,1)),
    radial-gradient(circle at 20% 20%, rgba(215,189,55,.08), transparent 40%) !important;
}

@media(max-width:1180px) {
  .hero {
    grid-template-columns: 38% 62% !important;
  }
  .hero-art-wrap {
    width: min(78%, 760px) !important;
    height: min(48vh, 500px) !important;
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-meta {
    padding-left: 34px !important;
  }
  .hero-meta::before,
  .hero-meta::after {
    display: none;
  }
  .hero-art-stage {
    min-height: auto !important;
    padding: 10px 28px 32px !important;
  }
  .hero-art-wrap {
    width: min(94%, 560px) !important;
    height: min(42vh, 390px) !important;
  }
  .palette-panel {
    transform: none !important;
  }
}


/* v1.6 concept hero field
   This is a decisive shift from "image in a frame" to the approved concept:
   the featured artwork becomes a large atmospheric field on the right side.
   Full uncropped artwork remains available on artwork.php. */

.hero {
  min-height: calc(100vh - 84px) !important;
  grid-template-columns: 34% 66% !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(196,65,30,.06), transparent 24%),
    linear-gradient(90deg, var(--paper) 0%, #f4eee5 38%, #efe9df 100%) !important;
  overflow: hidden !important;
}

/* more refined concept texture */
.hero::before {
  opacity: .82 !important;
  background-image:
    linear-gradient(90deg, rgba(17,17,16,.045) 1px, transparent 1px),
    linear-gradient(rgba(17,17,16,.032) 1px, transparent 1px),
    radial-gradient(circle at 4% 42%, rgba(17,17,16,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 70%, rgba(196,65,30,.16) 0 1px, transparent 2px) !important;
  background-size: 96px 96px, 96px 96px, 180px 180px, 240px 240px !important;
  mask-image: linear-gradient(90deg, black 0%, black 40%, transparent 82%) !important;
}

/* left rail should feel intentional, not accidental */
.hero-meta {
  padding-top: 72px !important;
  padding-bottom: 58px !important;
  padding-left: 86px !important;
  justify-content: center !important;
  z-index: 4 !important;
}
.hero-meta::before {
  left: 56px !important;
  top: 70px !important;
  bottom: 70px !important;
  background: linear-gradient(to bottom, rgba(17,17,16,.22), rgba(17,17,16,.05)) !important;
}
.hero-meta::after {
  left: 52px !important;
  top: 218px !important;
}

.home-art-line {
  font-size: 13px !important;
  letter-spacing: .30em !important;
  margin-bottom: 22px !important;
}

.kicker {
  font-size: 11px !important;
  letter-spacing: .34em !important;
}

.hero-title {
  font-size: clamp(42px, 4.9vw, 76px) !important;
  line-height: 1.05 !important;
  letter-spacing: .24em !important;
  margin: 28px 0 20px !important;
}
.hero-sub {
  font-size: 13px !important;
  letter-spacing: .34em !important;
}
.hero-desc {
  max-width: 430px !important;
  line-height: 1.7 !important;
}

/* The right side now behaves like concept art field, not a framed photo. */
.hero-art-stage {
  position: relative !important;
  min-height: calc(100vh - 84px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* huge bleed area */
.hero-art-wrap {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: -4vw !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}

/* remove previous card glow */
.hero-art-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(247,243,238,.95) 0%, rgba(247,243,238,.50) 15%, rgba(247,243,238,.06) 38%, rgba(247,243,238,0) 62%),
    radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* actual image becomes a field/bleed */
.hero-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: .96 !important;
  filter: contrast(1.08) saturate(1.05) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* overlay technical marks like approved concept, CSS-only */
.hero-art-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: 8.5%;
  top: 18%;
  width: 1px;
  height: 54%;
  background: rgba(17,17,16,.18);
  box-shadow:
    -210px 100px 0 rgba(17,17,16,.12),
    -140px 270px 0 rgba(17,17,16,.10);
}
.hero-art-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: 16%;
  width: 150px;
  height: 112px;
  border: 1px solid rgba(251,248,243,.75);
  box-shadow: 0 0 0 1px rgba(17,17,16,.16) inset;
  background: rgba(17,17,16,.06);
}

/* palette tool sits on top of image field */
.palette-panel {
  z-index: 5 !important;
  right: 42px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(.88) !important;
  background: rgba(17,18,18,.92) !important;
}

/* recent works starts immediately after full concept hero */
.dark-strip {
  margin-top: 0 !important;
  padding-top: 30px !important;
}

/* avoid over-tall homepage on medium screens */
@media(max-width:1180px) {
  .hero {
    grid-template-columns: 40% 60% !important;
  }
  .hero-meta {
    padding-left: 64px !important;
  }
  .hero-meta::before,
  .hero-meta::after {
    display: none;
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-meta {
    padding: 38px 32px 22px !important;
  }
  .hero-art-stage {
    min-height: 58vh !important;
  }
  .hero-art-wrap {
    left: 0 !important;
  }
  .hero-art-wrap::before {
    background: linear-gradient(180deg, rgba(247,243,238,.15), rgba(247,243,238,.65)) !important;
  }
  .palette-panel {
    position: absolute !important;
    right: 20px !important;
    top: 28px !important;
    transform: scale(.78) !important;
    transform-origin: top right !important;
  }
}


/* v1.7 shorter hero + image-extracted palette
   Palette now identifies the current artwork colors.
   It does NOT change the background. */

.hero {
  min-height: 690px !important;
  height: calc(82vh - 84px) !important;
  max-height: 760px !important;
  grid-template-columns: 34% 66% !important;
}

.hero-art-stage {
  min-height: 0 !important;
  height: 100% !important;
}

.hero-art-wrap {
  top: 0 !important;
  bottom: 0 !important;
}

/* Keep concept field, but prevent it from swallowing the whole viewport. */
.hero-art {
  object-fit: cover !important;
  object-position: center center !important;
}

.hero-meta {
  padding-top: 54px !important;
  padding-bottom: 42px !important;
}

.hero-title {
  font-size: clamp(38px, 4.4vw, 68px) !important;
}

/* Replace control-palette with readout-palette */
.palette-panel,
.viewer-palette {
  background: rgba(17,18,18,.90) !important;
  color: var(--paper) !important;
  border-radius: 13px !important;
  padding: 16px 14px !important;
  gap: 10px !important;
}

.image-palette-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
}

.palette-label {
  font-family: var(--title-font);
  letter-spacing: .20em;
  text-transform: uppercase;
  font-size: 9px;
  line-height: 1.55;
  color: rgba(251,248,243,.74);
  margin-bottom: 4px;
}

.palette-label span {
  color: rgba(251,248,243,.48);
  letter-spacing: .12em;
}

.image-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

/* No pointer/control behavior */
.image-swatch,
.palette-dot {
  cursor: default !important;
}

.palette-dot {
  display: none !important;
}

/* Pull Recent Works up and make it visible */
.dark-strip {
  padding-top: 24px !important;
  padding-bottom: 34px !important;
}

@media(max-width:1180px) {
  .hero {
    height: auto !important;
    min-height: 640px !important;
  }
}

@media(max-width:900px) {
  .hero {
    height: auto !important;
    min-height: auto !important;
  }
  .hero-art-stage {
    min-height: 48vh !important;
  }
}


/* v1.8 dimensional hero effect
   Uses generated/cached PHP image effect from api/hero_effect.php.
   This aims at the approved first-image effect: atmospheric splatter field, not flat full-photo background. */

.hero {
  min-height: 610px !important;
  height: calc(78vh - 84px) !important;
  max-height: 690px !important;
  grid-template-columns: 34% 66% !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(196,65,30,.055), transparent 24%),
    linear-gradient(90deg, var(--paper) 0%, #f5eee5 44%, #f2ece3 100%) !important;
}

.hero-art-stage {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hero-art-wrap {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: -2vw !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

/* remove previous full-photo overlay; generated PNG already contains the diffusion treatment */
.hero-art-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(247,243,238,.92) 0%, rgba(247,243,238,.44) 16%, rgba(247,243,238,.05) 35%, transparent 62%),
    radial-gradient(circle at 85% 45%, rgba(17,17,16,.10), transparent 44%) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* generated effect image should be seen whole as a field, not cropped like a photo */
.hero-art.effect-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* concept-like technical marks over effect */
.hero-art-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: 10%;
  top: 16%;
  width: 1px;
  height: 54%;
  background: rgba(17,17,16,.16);
  box-shadow:
    -220px 96px 0 rgba(17,17,16,.10),
    -150px 250px 0 rgba(17,17,16,.08);
}
.hero-art-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: 15%;
  width: 145px;
  height: 105px;
  border: 1px solid rgba(251,248,243,.68);
  box-shadow: 0 0 0 1px rgba(17,17,16,.14) inset;
  background: rgba(17,17,16,.035);
}

.palette-panel {
  z-index: 5 !important;
  right: 38px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(.80) !important;
}

.hero-meta {
  padding-top: 50px !important;
  padding-bottom: 38px !important;
}
.hero-title {
  font-size: clamp(36px, 4.2vw, 64px) !important;
}

.dark-strip {
  padding-top: 22px !important;
  padding-bottom: 32px !important;
}

@media(max-width:900px) {
  .hero {
    height: auto !important;
    max-height: none !important;
  }
  .hero-art-stage {
    min-height: 48vh !important;
  }
}


/* v1.9 force dimensional effect image source */
.hero {
  min-height: 610px !important;
  height: calc(78vh - 84px) !important;
  max-height: 690px !important;
  grid-template-columns: 34% 66% !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(196,65,30,.055), transparent 24%),
    linear-gradient(90deg, var(--paper) 0%, #f5eee5 44%, #f2ece3 100%) !important;
}

.hero-art-stage {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hero-art-wrap {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: -2vw !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

.hero-art-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(247,243,238,.94) 0%, rgba(247,243,238,.50) 15%, rgba(247,243,238,.08) 34%, transparent 62%),
    radial-gradient(circle at 82% 44%, rgba(17,17,16,.08), transparent 42%) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.hero-art.effect-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.dark-strip {
  padding-top: 22px !important;
  padding-bottom: 32px !important;
}

/* this label proves v1.9 CSS loaded if inspected */
body::after {
  content: "";
  display: none;
}


/* v2.0 custom hero images */
.hero {
  min-height: 610px !important;
  height: calc(78vh - 84px) !important;
  max-height: 690px !important;
  grid-template-columns: 34% 66% !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(196,65,30,.055), transparent 24%),
    linear-gradient(90deg, var(--paper) 0%, #f5eee5 44%, #f2ece3 100%) !important;
}
.hero-art-stage { min-height: 0 !important; height: 100% !important; overflow: hidden !important; }
.hero-art-wrap {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: -2vw !important;
  width: auto !important; height: auto !important; overflow: hidden !important;
}
.hero-art-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(247,243,238,.94) 0%, rgba(247,243,238,.48) 14%, rgba(247,243,238,.06) 34%, transparent 62%),
    radial-gradient(circle at 82% 44%, rgba(17,17,16,.06), transparent 42%) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.hero-art.effect-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center center !important;
  border: 0 !important; box-shadow: none !important; filter: none !important; opacity: 1 !important;
  background: transparent !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.admin-card { grid-template-columns: 78px 1fr minmax(280px, auto) !important; }
.admin-card input[type=file] { margin: 0 4px 4px 0; }
.dark-strip { padding-top: 22px !important; padding-bottom: 32px !important; }


/* v2.1 website polish */
.hero-status-note {
  position: absolute;
  z-index: 6;
  right: 44px;
  bottom: 28px;
  font-family: var(--title-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 9px;
  color: rgba(17,17,16,.45);
  display: none;
}
.hero-art.raw-art-fallback { filter: contrast(1.04) saturate(.92) !important; }
.hero-art.has-hero-treatment { filter: none !important; }
.hero {
  min-height: 590px !important;
  height: calc(76vh - 84px) !important;
  max-height: 670px !important;
}
.hero-title { font-size: clamp(34px, 4.05vw, 62px) !important; }
.hero-meta { padding-top: 48px !important; padding-bottom: 36px !important; }
.dark-strip { padding-top: 24px !important; padding-bottom: 36px !important; }
.recent-track { gap: 24px !important; }
.recent-card img { border-color: rgba(255,255,255,.22) !important; }

.works-page { padding-top: 70px !important; }
.works-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 42px;
  align-items: end;
}
.works-feature-link {
  border: 1px solid var(--line);
  padding: 22px;
  background: rgba(251,248,243,.62);
  display: grid;
  gap: 8px;
}
.works-feature-link span,
.works-feature-link em {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 10px;
  color: var(--muted);
  font-style: normal;
}
.works-feature-link strong {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 18px;
}
.refined-masonry { column-count: 4; column-gap: 34px; }
.refined-masonry .work-tile { margin-bottom: 42px; position: relative; }
.refined-masonry .work-tile img {
  background: var(--paper);
  box-shadow: 8px 10px 0 rgba(17,17,16,.08);
}
.work-tile-2 img,
.work-tile-4 img { margin-top: 36px; }
.work-caption { padding-top: 12px; }

.artwork-page { background: var(--cream); }
.artwork-viewer {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 46px;
  padding: 56px 64px 70px;
}
.artwork-meta-panel { align-self: center; display: grid; gap: 20px; }
.artwork-meta-panel h1 {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  margin: 0;
}
.artwork-meta-panel p { color: var(--muted); line-height: 1.72; margin: 0; }
.artwork-line,
.artwork-collection {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  color: var(--ink) !important;
}
.artwork-image-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(17,17,16,.035) 1px, transparent 1px),
    linear-gradient(rgba(17,17,16,.025) 1px, transparent 1px);
  background-size: 96px 96px;
  border-left: 1px solid var(--line);
  min-height: 620px;
}
.artwork-image-stage img {
  max-width: min(92%, 980px);
  max-height: calc(100vh - 210px);
  width: auto;
  height: auto;
  display: block;
  border: 1px solid rgba(17,17,16,.34);
  box-shadow: 18px 22px 0 rgba(17,17,16,.12);
  background: var(--paper);
}
.related-works {
  background: var(--panel-dark);
  color: var(--paper);
  padding: 34px 64px 50px;
}
.related-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.related-card img {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
}
.related-card span {
  display: block;
  margin-top: 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
}

.collection-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 58px;
}
.collection-panel {
  min-height: 220px;
  display: grid;
  grid-template-columns: 42% 58%;
  border: 1px solid var(--line);
  background: rgba(251,248,243,.7);
  overflow: hidden;
  position: relative;
}
.collection-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(247,243,238,.18), transparent);
  pointer-events: none;
}
.collection-panel-info {
  padding: 28px;
  display: grid;
  align-content: center;
  gap: 16px;
}
.collection-panel-info span {
  font-family: var(--title-font);
  font-size: 34px;
  font-weight: 700;
}
.collection-panel-info h2 {
  margin: 0;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 20px;
  line-height: 1.35;
}
.collection-panel-info p {
  margin: 0;
  color: var(--muted);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
}
.collection-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-card { align-items: start !important; }
.admin-card form button { margin-top: 4px; }

@media(max-width:1100px) {
  .refined-masonry { column-count: 3; }
  .works-intro { grid-template-columns: 1fr; }
  .artwork-viewer { grid-template-columns: 1fr; }
  .artwork-image-stage { border-left: 0; min-height: auto; padding: 34px 0; }
  .related-row { grid-template-columns: repeat(3, 1fr); }
  .collection-wall { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
  .refined-masonry { column-count: 1; }
  .artwork-viewer { padding: 34px 28px 46px; }
  .related-row { grid-template-columns: repeat(2, 1fr); }
}


/* v2.2 Recent Works strip image-fit correction
   The black strip should preserve artwork proportions.
   No cropping, no random top alignment, no uneven visual baseline. */

.dark-strip {
  padding: 26px 64px 42px !important;
  background:
    linear-gradient(180deg, rgba(18,19,19,.98), rgba(13,14,14,1)) !important;
  overflow: hidden;
}

.dark-strip .section-head {
  margin-bottom: 24px !important;
  align-items: center !important;
}

.recent-track {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.recent-card {
  display: grid !important;
  grid-template-rows: 220px auto !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  align-items: start !important;
}

.recent-card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 58%),
    rgba(247,243,238,.035) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

.recent-card h3,
.recent-card p {
  text-align: left !important;
}

.recent-card h3 {
  margin-top: 0 !important;
}

/* Keep very wide/tall images visually centered without forcing a crop. */
.recent-card.portrait img,
.recent-card.landscape img,
.recent-card.square img {
  object-fit: contain !important;
}

/* Works/archive masonry can remain more expressive; only homepage strip is normalized. */
.home .recent-card img,
.dark-strip .recent-card img {
  object-fit: contain !important;
}

@media(max-width: 1180px) {
  .recent-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 700px) {
  .dark-strip {
    padding: 24px 28px 34px !important;
  }
  .recent-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .recent-card {
    grid-template-rows: 170px auto !important;
  }
  .recent-card img {
    height: 170px !important;
  }
}


/* v2.3 immersive artwork page */
.artwork-immersive-page {
  background: var(--cream);
}

.immersive-viewer {
  min-height: calc(100vh - 84px);
  height: calc(100vh - 84px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 350px) minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
  padding: 30px 44px 34px;
  background:
    radial-gradient(circle at 68% 46%, color-mix(in srgb, var(--viewer-wall) 82%, white), transparent 48%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--viewer-wall) 78%, #fbf8f3) 0%,
      color-mix(in srgb, var(--viewer-wall) 96%, #111214) 100%);
  color: var(--ink);
  transition: background .28s ease;
  position: relative;
}

.immersive-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .28;
  mix-blend-mode: soft-light;
}

.immersive-info,
.immersive-controls,
.immersive-art-stage {
  position: relative;
  z-index: 2;
}

.immersive-info {
  align-self: center;
  max-height: calc(100vh - 150px);
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 22px 0;
}

.immersive-info h1 {
  margin: 0;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.05;
}

.immersive-info p {
  margin: 0;
  line-height: 1.62;
  color: rgba(17,17,16,.72);
}

.artwork-line,
.artwork-collection {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  color: rgba(17,17,16,.86) !important;
}

.artwork-description {
  max-width: 320px;
}

.immersive-actions {
  margin-top: 12px;
}

.immersive-art-stage {
  justify-self: center;
  align-self: center;
  max-width: 100%;
  max-height: calc(100vh - 154px);
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 26px 36px rgba(17,17,16,.25))
    drop-shadow(0 8px 10px rgba(17,17,16,.18));
}

.immersive-art-stage img {
  display: block;
  max-width: min(100%, 1040px);
  max-height: calc(100vh - 158px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.immersive-art-stage.frame-white img,
.immersive-art-stage.frame-thin img {
  border: 2px solid rgba(251,248,243,.94);
  box-shadow: 0 0 0 1px rgba(17,17,16,.18);
}

.immersive-art-stage.frame-black img {
  border: 2px solid rgba(17,17,16,.92);
  box-shadow: 0 0 0 1px rgba(251,248,243,.18);
}

.immersive-art-stage.frame-frameless img {
  border: 0;
  box-shadow: none;
}

.immersive-controls {
  justify-self: end;
  align-self: center;
  width: 184px;
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(17,18,18,.84);
  color: var(--paper);
  box-shadow: 0 18px 38px rgba(17,17,16,.24);
  backdrop-filter: blur(10px);
}

.control-label {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
  line-height: 1.55;
  color: rgba(251,248,243,.78);
  margin-bottom: 10px;
}

.control-label span {
  color: rgba(251,248,243,.46);
  letter-spacing: .12em;
}

.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.viewer-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  cursor: pointer;
}

.viewer-swatch.active {
  outline: 2px solid rgba(251,248,243,.86);
  outline-offset: 3px;
}

.frame-controls {
  display: grid;
  gap: 8px;
}

.frame-controls button {
  width: 100%;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  color: rgba(251,248,243,.84);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  padding: 9px 8px;
  cursor: pointer;
}

.frame-controls button.active {
  background: rgba(251,248,243,.90);
  color: #111214;
}

.compact-related {
  padding-top: 28px !important;
}

@media(max-width: 1180px) {
  .immersive-viewer {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .immersive-controls {
    grid-column: 1 / -1;
    width: auto;
    justify-self: stretch;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media(max-width: 820px) {
  .immersive-viewer {
    height: auto;
    min-height: calc(100vh - 84px);
    overflow: visible;
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .immersive-info {
    max-height: none;
  }
  .immersive-art-stage {
    max-height: 62vh;
  }
  .immersive-art-stage img {
    max-height: 62vh;
  }
  .immersive-controls {
    grid-template-columns: 1fr;
  }
}


/* v2.4 no horizontal scrolling guard
   Rule: horizontal overflow is never allowed anywhere on the public site/admin.
   Vertical scrolling remains allowed on home, works/archive, collections, admin. */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  position: relative;
}

*,
*::before,
*::after {
  max-width: 100%;
}

/* Media should never force wider-than-viewport layout */
img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Grid/flex children can otherwise force horizontal overflow */
main,
section,
article,
aside,
header,
footer,
div,
nav {
  min-width: 0;
}

/* Header: prevent nav/logo/location from pushing viewport sideways */
.vrf-header {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.identity-lockup,
.nav,
.location {
  min-width: 0 !important;
}

.nav {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Homepage hero: prevent right-side bleed from creating page-wide overflow */
.hero {
  max-width: 100vw !important;
  overflow: hidden !important;
}

.hero-art-stage {
  max-width: 100% !important;
  overflow: hidden !important;
}

.hero-art-wrap {
  max-width: none !important;
  overflow: hidden !important;
}

/* If a negative-left hero field exists, keep it inside the hero only */
.hero-art-wrap,
.hero-art-stage::before,
.hero-art-stage::after {
  contain: paint;
}

/* Works/archive/collections: vertical scrolling allowed, horizontal forbidden */
.page,
.works-page,
.collections-page,
.works-masonry,
.refined-masonry,
.collection-wall,
.collection-grid {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Masonry columns can create overflow if column gap + content width exceeds screen */
.works-masonry,
.refined-masonry {
  width: 100% !important;
}

/* Recent strip: no sideways overflow */
.dark-strip,
.recent-track,
.recent-card {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Artwork immersive page: must fit viewport width with no horizontal scroll */
.artwork-immersive-page,
.immersive-viewer {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.immersive-viewer {
  box-sizing: border-box !important;
}

.immersive-info,
.immersive-art-stage,
.immersive-controls {
  min-width: 0 !important;
  max-width: 100% !important;
}

.immersive-art-stage img {
  max-width: 100% !important;
}

/* Related rows should wrap instead of creating horizontal scroll */
.related-row {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Admin cards/forms should never push sideways */
.admin-page,
.admin-grid,
.admin-panel,
.admin-list,
.admin-card {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.admin-card {
  min-width: 0 !important;
}

.admin-card input,
.admin-card button,
.admin-card form,
.admin-panel input,
.admin-panel textarea,
.admin-panel select {
  max-width: 100% !important;
}

/* Stronger responsive collapse before horizontal scrolling can happen */
@media(max-width: 1280px) {
  .vrf-header {
    grid-template-columns: minmax(180px, 300px) minmax(0, 1fr) minmax(170px, 280px) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .nav {
    gap: 24px !important;
    font-size: 12px !important;
  }

  .location {
    font-size: 10px !important;
  }
}

@media(max-width: 980px) {
  .vrf-header {
    grid-template-columns: 1fr auto !important;
  }

  .nav,
  .location {
    display: none !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero-art-wrap {
    left: 0 !important;
  }

  .immersive-viewer {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: calc(100vh - 84px) !important;
    overflow-y: visible !important;
  }

  .immersive-controls {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .admin-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }

  .admin-card > div:last-child {
    grid-column: 1 / -1;
  }
}

@media(max-width: 700px) {
  .vrf-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .identity-lockup img {
    max-width: min(190px, 72vw) !important;
  }

  .page,
  .dark-strip,
  .collections,
  .related-works,
  .admin-page {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .recent-track,
  .collection-wall,
  .collection-grid,
  .related-row {
    grid-template-columns: 1fr !important;
  }

  .immersive-viewer {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* v2.5 Works filtering + admin cleanup */
.works-filter-panel{margin:34px 0 46px;display:grid;gap:16px;border:1px solid var(--line);background:rgba(251,248,243,.68);padding:18px;overflow:hidden}.filter-row,.filter-search-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}.filter-label,.filter-search-row label,.works-count{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--muted)}.filter-pill{border:1px solid rgba(17,17,16,.22);background:rgba(255,255,255,.54);color:var(--ink);font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:10px;padding:9px 12px;cursor:pointer}.filter-pill.active{background:var(--ink);color:var(--paper)}.filter-search-row{border-top:1px solid rgba(17,17,16,.10);padding-top:14px}.filter-search-row input{flex:1 1 260px;min-width:0;border:1px solid rgba(17,17,16,.20);background:rgba(255,255,255,.62);padding:11px 12px;font:inherit}.works-count{margin-left:auto}.work-caption span{display:block;margin-top:5px;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted)}.work-tile[hidden]{display:none!important}.no-results{border:1px solid var(--line);padding:28px;text-align:center;color:var(--muted)}
.admin-v25{padding:42px clamp(22px,4vw,64px)}.admin-topbar{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:24px}.admin-public-link,.admin-open{border:1px solid var(--line);padding:10px 14px;background:rgba(255,255,255,.55);font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:10px}.admin-status-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:24px 0}.admin-status-grid div{border:1px solid var(--line);background:rgba(251,248,243,.72);padding:16px;display:grid;gap:8px}.admin-status-grid span{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted)}.admin-status-grid strong{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.08em;font-size:20px;overflow-wrap:anywhere}.admin-form-grid,.admin-edit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.admin-form-grid .wide,.admin-edit-grid .wide{grid-column:1/-1}.admin-form-grid label,.admin-edit-grid label{display:grid;gap:6px;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted)}.admin-form-grid input,.admin-form-grid textarea,.admin-form-grid select,.admin-edit-grid input,.admin-edit-grid textarea,.admin-edit-grid select{width:100%;min-width:0;border:1px solid rgba(17,17,16,.20);background:rgba(255,255,255,.74);padding:10px;font-family:inherit;letter-spacing:normal;text-transform:none;color:var(--ink)}.admin-form-grid .check,.admin-edit-grid .check{display:flex;align-items:center;gap:8px}.admin-help{color:var(--muted);font-size:13px;line-height:1.6;text-transform:none;letter-spacing:normal}.admin-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 18px}.admin-list-head h2{margin:0;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.16em}.admin-art-card{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(220px,300px);gap:18px;align-items:start;border:1px solid var(--line);background:rgba(251,248,243,.70);padding:16px;margin-bottom:16px;overflow:hidden}.admin-thumb img{width:92px;height:92px;object-fit:contain;background:rgba(17,17,16,.05);border:1px solid rgba(17,17,16,.16)}.admin-art-title-row{display:flex;gap:12px;align-items:start;justify-content:space-between}.admin-art-title-row h3{margin:0;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.12em;overflow-wrap:anywhere}.admin-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.badge{font-family:var(--title-font);text-transform:uppercase;letter-spacing:.12em;font-size:9px;padding:5px 7px;border:1px solid rgba(17,17,16,.18);white-space:nowrap}.badge.featured{background:#111214;color:#f7f3ee}.badge.published{background:rgba(77,121,94,.18)}.badge.hidden{background:rgba(180,82,61,.16)}.badge.hero{background:rgba(96,117,124,.18)}.badge.missing{background:rgba(17,17,16,.06);color:var(--muted)}.admin-art-meta{color:var(--muted)}.admin-edit-details{margin-top:12px}.admin-edit-details summary{cursor:pointer;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:10px}.admin-edit-grid{margin-top:14px}.admin-art-actions{display:grid;gap:8px}.admin-art-actions form{display:grid;gap:6px}.admin-art-actions button,.admin-actions button{width:100%;border:1px solid rgba(17,17,16,.24);background:var(--ink);color:var(--paper);padding:10px;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:10px;cursor:pointer}.admin-art-actions button.danger{background:#7c1e17}.hero-upload-mini label{display:grid;gap:6px;font-family:var(--title-font);text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:var(--muted)}.hero-upload-mini input[type=file]{width:100%;min-width:0;font-size:10px}
@media(max-width:1180px){.admin-status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-art-card{grid-template-columns:82px minmax(0,1fr)}.admin-art-actions{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.admin-form-grid,.admin-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.admin-topbar,.admin-art-title-row{display:grid}.admin-status-grid,.admin-form-grid,.admin-edit-grid,.admin-art-actions{grid-template-columns:1fr}.admin-art-card{grid-template-columns:1fr}.admin-thumb img{width:100%;height:140px}.works-count{margin-left:0}}


/* v2.6 Recent Works, Collections, Admin local confirmations */
.dark-strip{padding:24px 56px 34px!important;}
.dark-strip .section-head{margin-bottom:18px!important;}
.recent-track{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:22px!important;align-items:start!important;overflow:hidden!important;}
.recent-card{display:grid!important;grid-template-rows:158px auto auto!important;gap:8px!important;width:100%!important;min-width:0!important;}
.recent-card img{width:100%!important;height:158px!important;object-fit:contain!important;object-position:center center!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.18)!important;}
.recent-card h3{margin:10px 0 0!important;font-size:11px!important;line-height:1.35!important;white-space:normal!important;}
.recent-card p{margin:0!important;font-size:12px!important;color:rgba(247,243,238,.62)!important;}
.collection-wall{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;}
.collection-panel{min-height:190px!important;max-height:260px!important;grid-template-columns:minmax(220px,38%) minmax(0,1fr)!important;}
.collection-panel-image{display:flex!important;align-items:center!important;justify-content:center!important;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 58%),rgba(17,17,16,.035)!important;overflow:hidden!important;}
.collection-panel-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;padding:14px!important;}
.local-message{margin:0 0 14px!important;}
.card-local-message{grid-column:1/-1;}
.admin-focus-pulse{outline:2px solid rgba(199,174,42,.75);outline-offset:5px;transition:outline-color .35s ease;}
.admin-art-card{scroll-margin-top:120px;}
#upload-panel,#admin-library{scroll-margin-top:120px;}
@media(max-width:1320px){.recent-track{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:900px){.collection-wall{grid-template-columns:1fr!important}.collection-panel{grid-template-columns:1fr!important;max-height:none!important}.collection-panel-image{min-height:220px;}}
@media(max-width:700px){.dark-strip{padding-left:22px!important;padding-right:22px!important}.recent-track{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.recent-card{grid-template-rows:145px auto auto!important}.recent-card img{height:145px!important;}}


/* v2.7 Front-page collections fit correction */
.collections {
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}
.collections .collection-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.collections .collection-card {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  min-height: 210px !important;
  height: 210px !important;
  max-height: 210px !important;
  overflow: hidden !important;
  background: rgba(251,248,243,.72) !important;
}
.collections .collection-info {
  padding: 24px 18px 20px !important;
  display: grid !important;
  align-content: center !important;
  min-width: 0 !important;
}
.collections .collection-title {
  font-size: 12px !important;
  letter-spacing: .22em !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}
.collections .collection-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 10px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 58%),
    rgba(17,17,16,.035) !important;
  border-left: 1px solid rgba(17,17,16,.10) !important;
}
@media(max-width: 1280px) {
  .collections .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media(max-width: 720px) {
  .collections .collection-grid {
    grid-template-columns: 1fr !important;
  }
  .collections .collection-card {
    grid-template-columns: 38% 62% !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}


/* v2.8 Front-page collections: no clipped text, no stretched images.
   Replaces cramped four-across layout with a clean two-column viewing layout. */

.collections {
  padding-top: 54px !important;
  padding-bottom: 72px !important;
  overflow: visible !important;
}

.collections .section-head {
  margin-bottom: 26px !important;
}

.collections .collection-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.collections .collection-card {
  display: grid !important;
  grid-template-columns: minmax(210px, 38%) minmax(0, 62%) !important;
  min-height: 260px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: rgba(251,248,243,.76) !important;
  border: 1px solid rgba(17,17,16,.16) !important;
}

.collections .collection-info {
  padding: 30px 26px !important;
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.collections .collection-info .index,
.collections .collection-number,
.collections .collection-info span:first-child {
  line-height: 1 !important;
}

.collections .collection-title,
.collections .collection-info h3,
.collections .collection-info h2 {
  font-size: 14px !important;
  letter-spacing: .22em !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
}

.collections .collection-info p,
.collections .collection-count {
  display: block !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  overflow: visible !important;
}

.collections .collection-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: 260px !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), transparent 58%),
    rgba(17,17,16,.035) !important;
  border-left: 1px solid rgba(17,17,16,.10) !important;
  box-sizing: border-box !important;
}

/* Make the image area stable without cropping the artwork. */
.collections .collection-card > img,
.collections .collection-image,
.collections .collection-panel-image {
  min-height: 260px !important;
  height: 260px !important;
  max-height: 260px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.collections .collection-image img,
.collections .collection-panel-image img {
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* On smaller screens, stack cards without clipping. */
@media(max-width: 1080px) {
  .collections .collection-grid {
    grid-template-columns: 1fr !important;
  }

  .collections .collection-card {
    min-height: 240px !important;
    grid-template-columns: minmax(190px, 36%) minmax(0, 64%) !important;
  }

  .collections .collection-card img,
  .collections .collection-card > img,
  .collections .collection-image,
  .collections .collection-panel-image {
    max-height: 240px !important;
    height: 240px !important;
    min-height: 240px !important;
  }
}

@media(max-width: 700px) {
  .collections .collection-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .collections .collection-info {
    padding: 24px 22px !important;
  }

  .collections .collection-card img,
  .collections .collection-card > img,
  .collections .collection-image,
  .collections .collection-panel-image {
    max-height: 260px !important;
    height: 260px !important;
    min-height: 260px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(17,17,16,.10) !important;
  }
}


/* v3.0 Typography correction
   Oxanium was too sci-fi/game-interface for artwork names.
   This switches naming/nav/labels to a cleaner geometric gallery tone. */

:root {
  --title-font:'Oxanium',system-ui,sans-serif;
}

/* Artwork and collection names: cleaner, less gimmicky tracking. */
.hero-title,
.page-title,
.art-room-info h1,
.artwork-meta-panel h1,
.viewer-meta h1 {
  font-family: var(--title-font) !important;
  font-weight: 600 !important;
  letter-spacing: .105em !important;
  line-height: 1.03 !important;
}

.collection-title,
.collection-info h2,
.collection-info h3,
.recent-title,
.work-caption h3,
.work-tile h3,
.admin-art-title-row h3 {
  font-family: var(--title-font) !important;
  font-weight: 600 !important;
  letter-spacing: .105em !important;
}

/* Nav and utility labels: still technical, but less arcade. */
.nav,
.kicker,
.section-head,
.link-arrow,
.btn-primary,
.location,
.footer,
.filter-label,
.filter-search-row label,
.works-count,
.filter-pill,
.room-control-group > span,
.room-frame-controls button,
.frame-controls button,
.control-label,
.admin-status-grid span,
.admin-status-grid strong,
.admin-form-grid label,
.admin-edit-grid label,
.admin-public-link,
.admin-open,
.badge {
  font-family: var(--title-font) !important;
  letter-spacing: .135em !important;
}

/* Hero/action buttons should stay crisp but not overly spaced. */
.btn-primary {
  letter-spacing: .16em !important;
  font-weight: 600 !important;
}

/* Titles should breathe without looking like a terminal font. */
.hero-title {
  letter-spacing: .125em !important;
  font-weight: 600 !important;
}

.art-room-info h1 {
  letter-spacing: .11em !important;
}

.collection-number,
.collection-info span:first-child {
  font-family: var(--title-font) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* v2.9 Artwork viewing room correction */
.artwork-room-page {
  height: calc(100vh - 84px - 42px) !important;
  min-height: 560px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px 48px 20px !important;
  background:
    radial-gradient(circle at 62% 44%, color-mix(in srgb, var(--room-bg) 82%, white), transparent 48%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--room-bg) 88%, #f7f3ee) 0%,
      color-mix(in srgb, var(--room-bg) 86%, #111214) 100%) !important;
  color: var(--ink) !important;
  transition: background .24s ease !important;
  box-sizing: border-box !important;
}

.artwork-room-page::before {
  content: "";
  position: absolute;
  inset: 84px 0 42px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity: .25;
  mix-blend-mode: soft-light;
}

.art-room-info,
.art-room-center {
  position: relative;
  z-index: 2;
  min-width: 0 !important;
}

.art-room-info {
  display: grid;
  gap: 15px;
  align-content: center;
  max-height: 100%;
  overflow: hidden;
}

.art-room-info h1 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 56px);
}

.art-room-info p {
  margin: 0;
  line-height: 1.55;
  color: rgba(17,17,16,.74);
}

.art-room-info .artwork-line,
.art-room-info .artwork-collection {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .13em !important;
  font-size: 11px;
  color: rgba(17,17,16,.88) !important;
}

.art-room-info .artwork-description {
  max-width: 315px;
}

.art-room-center {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  justify-items: center;
}

.art-room-stage {
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 84px - 42px - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 28px 34px rgba(17,17,16,.28))
    drop-shadow(0 8px 10px rgba(17,17,16,.18));
}

.art-room-stage img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 1180px) !important;
  max-height: calc(100vh - 84px - 42px - 112px) !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.art-room-stage.frame-frameless img {
  border: 0 !important;
  box-shadow: none !important;
}

.art-room-stage.frame-white img {
  border: 2px solid rgba(248,244,236,.98) !important;
  box-shadow: 0 0 0 1px rgba(17,17,16,.20) !important;
}

.art-room-stage.frame-black img {
  border: 2px solid rgba(17,18,18,.96) !important;
  box-shadow: 0 0 0 1px rgba(248,244,236,.18) !important;
}

.art-room-controls {
  width: min(100%, 840px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 26px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17,18,18,.72);
  color: var(--paper);
  box-shadow: 0 16px 34px rgba(17,17,16,.18);
  backdrop-filter: blur(10px);
}

.room-control-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.room-control-group > span {
  text-transform: uppercase;
  font-size: 9px;
  color: rgba(248,244,236,.70);
  white-space: nowrap;
}

.room-swatches,
.room-frame-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.room-swatch {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.room-swatch.active {
  outline: 2px solid rgba(248,244,236,.88);
  outline-offset: 3px;
}

.room-frame-controls button {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: rgba(248,244,236,.82);
  text-transform: uppercase;
  font-size: 9px;
  padding: 7px 9px;
  cursor: pointer;
}

.room-frame-controls button.active {
  background: rgba(248,244,236,.92);
  color: #111214;
}

.artwork-immersive-page .immersive-controls,
.viewer-palette,
.image-palette-panel.viewer-palette {
  display: none !important;
}

@media(max-width: 1080px) {
  .artwork-room-page {
    height: auto !important;
    min-height: calc(100vh - 84px) !important;
    overflow-y: visible !important;
    grid-template-columns: 1fr !important;
    padding: 28px !important;
  }

  .art-room-info {
    max-height: none;
  }

  .art-room-center {
    gap: 18px;
  }

  .art-room-stage,
  .art-room-stage img {
    max-height: 62vh !important;
  }

  .art-room-controls {
    border-radius: 18px;
  }
}





/* v3.3 Oxanium Restore + One-row Collections
   Restores the originally selected Oxanium direction.
   This uses the public Google Fonts import, so no missing local font file is required. */

:root {
  --title-font: 'Oxanium', system-ui, sans-serif !important;
  --body-font: 'Inter', system-ui, sans-serif !important;
}

/* Restore Oxanium across naming, nav, labels, controls. */
.hero-title,
.page-title,
.art-room-info h1,
.artwork-meta-panel h1,
.viewer-meta h1,
.collection-title,
.collection-info h2,
.collection-info h3,
.recent-title,
.work-caption h3,
.work-tile h3,
.admin-art-title-row h3,
.nav,
.kicker,
.section-head,
.link-arrow,
.btn-primary,
.location,
.footer,
.filter-label,
.filter-search-row label,
.works-count,
.filter-pill,
.room-control-group > span,
.room-frame-controls button,
.admin-public-link,
.admin-open,
.badge {
  font-family: var(--title-font) !important;
}

/* Keep titles intentional but not over-spaced. */
.hero-title,
.page-title,
.art-room-info h1 {
  font-weight: 600 !important;
  letter-spacing: .105em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.collection-title,
.collection-info h2,
.collection-info h3,
.recent-title,
.work-caption h3,
.work-tile h3 {
  font-weight: 600 !important;
  letter-spacing: .095em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.nav,
.kicker,
.section-head,
.link-arrow,
.btn-primary,
.location,
.footer,
.filter-label,
.filter-search-row label,
.works-count,
.filter-pill,
.room-control-group > span,
.room-frame-controls button,
.admin-public-link,
.admin-open,
.badge {
  font-weight: 600 !important;
  letter-spacing: .115em !important;
  text-transform: uppercase !important;
}

/* Body copy remains readable. */
body,
.hero-desc,
.page-intro,
.artwork-description,
.collection-meta,
.recent-meta,
.work-caption p,
.footer span {
  font-family: var(--body-font) !important;
}

/* Front-page Collections: one clean desktop row. */
.collections {
  padding: 44px 74px 58px !important;
  overflow: hidden !important;
}

.collections .section-head {
  margin-bottom: 20px !important;
}

.collections .collection-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.collections .collection-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 132px minmax(88px, auto) !important;
  height: 236px !important;
  min-height: 236px !important;
  max-height: 236px !important;
  overflow: hidden !important;
  border: 1px solid rgba(17,17,16,.16) !important;
  background: rgba(251,248,243,.74) !important;
}

.collections .collection-card > img,
.collections .collection-card img {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 132px !important;
  max-height: 132px !important;
  min-height: 132px !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), transparent 58%),
    rgba(17,17,16,.035) !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(17,17,16,.10) !important;
}

.collections .collection-info {
  grid-row: 2 !important;
  grid-column: 1 !important;
  padding: 14px 15px 13px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 5px !important;
  align-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.collections .collection-number {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  margin: 0 !important;
  font-family: var(--title-font) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  font-weight: 700 !important;
}

.collections .collection-title {
  grid-row: 1 !important;
  grid-column: 2 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.32 !important;
  letter-spacing: .095em !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
}

.collections .collection-meta {
  grid-row: 2 !important;
  grid-column: 2 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.collections .collection-image,
.collections .collection-panel-image {
  min-height: 132px !important;
  height: 132px !important;
  max-height: 132px !important;
}

@media(max-width: 1080px) {
  .collections .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 700px) {
  .collections {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .collections .collection-grid {
    grid-template-columns: 1fr !important;
  }

  .collections .collection-card {
    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;
  }
}