@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;
  }
}


/* v3.4 About + Contact pages */

.about-page,
.contact-page {
  max-width: 1440px;
  margin: 0 auto;
}

.about-hero,
.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(34px, 5vw, 74px);
  align-items: end;
  margin-bottom: 54px;
}

.about-hero .page-title,
.contact-hero .page-title {
  max-width: 900px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 24px;
}

.about-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(251,248,243,.88), rgba(255,255,255,.48));
  padding: 28px;
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: hidden;
}

.about-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -38% 35%;
  height: 180px;
  background: radial-gradient(circle, rgba(199,174,42,.20), transparent 62%);
  pointer-events: none;
}

.about-card-large {
  grid-row: span 2;
  min-height: 520px;
  align-content: center;
}

.about-card-dark {
  background:
    radial-gradient(circle at 78% 20%, rgba(199,174,42,.22), transparent 46%),
    #111214;
  color: var(--paper);
}

.about-card-dark p,
.about-card-dark .link-arrow {
  color: rgba(251,248,243,.78);
}

.about-index {
  font-family: var(--title-font);
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--accent);
}

.about-card h2,
.contact-notes h2 {
  margin: 0;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 18px;
}

.about-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.about-card-large p {
  font-size: 16px;
}

.contact-direct {
  border: 1px solid var(--line);
  background: rgba(251,248,243,.72);
  padding: 26px;
}

.contact-direct span {
  display: block;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}

.contact-direct a {
  font-family: var(--title-font);
  font-size: 22px;
  letter-spacing: .04em;
  word-break: break-word;
}

.contact-direct p {
  color: var(--muted);
  margin: 16px 0 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 28px;
  align-items: start;
}

.contact-form,
.contact-notes {
  border: 1px solid var(--line);
  background: rgba(251,248,243,.76);
  padding: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  color: var(--muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17,17,16,.22);
  background: rgba(255,255,255,.76);
  color: var(--ink);
  padding: 13px 14px;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
  min-height: 190px;
}

.contact-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.contact-actions button {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 22px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  cursor: pointer;
}

.contact-actions p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 520px;
}

.contact-notes ul {
  margin: 18px 0 0;
  padding-left: 19px;
  color: var(--muted);
  line-height: 1.8;
}

.contact-success {
  border-left-color: #4d795e !important;
  background: rgba(77,121,94,.10) !important;
}

.contact-error,
.message.error {
  border-left-color: #7c1e17 !important;
  background: rgba(124,30,23,.10) !important;
}

@media(max-width: 980px) {
  .about-hero,
  .contact-hero,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-card-large {
    grid-row: auto;
    min-height: auto;
  }
}

@media(max-width: 680px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    display: grid;
  }

  .contact-actions button {
    width: 100%;
  }
}

/* v3.5 Contact/About cleanup */
.contact-hero{grid-template-columns:minmax(0,900px)!important;align-items:start!important;margin-bottom:42px!important}
.contact-direct{display:none!important}
.contact-layout{grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important}
.contact-actions{margin-top:22px!important}
.contact-actions p{display:none!important}
.contact-actions button{min-width:170px}
.about-card-location{background:radial-gradient(circle at 82% 20%,rgba(199,174,42,.16),transparent 44%),linear-gradient(135deg,rgba(251,248,243,.88),rgba(255,255,255,.58))!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.about-card-location p,.about-card-location .link-arrow{color:var(--muted)!important}
.about-card-location h2{color:var(--ink)!important}
.about-card-dark{background:radial-gradient(circle at 82% 20%,rgba(199,174,42,.14),transparent 44%),linear-gradient(135deg,rgba(251,248,243,.88),rgba(255,255,255,.58))!important;color:var(--ink)!important}
.about-card-dark p,.about-card-dark .link-arrow{color:var(--muted)!important}


/* v3.8 Fine Art America Import Assistant */

.faa-import-page {
  max-width: 1500px;
}

.faa-import-panel h2,
.faa-preview-panel h2 {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.faa-import-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.faa-import-form .wide {
  grid-column: 1 / -1;
}

.faa-import-form label,
.faa-import-options label,
.faa-candidate-fields label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.faa-import-form input,
.faa-import-form select,
.faa-import-form textarea,
.faa-import-options input,
.faa-candidate-fields input,
.faa-candidate-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17,17,16,.20);
  background: rgba(255,255,255,.74);
  color: var(--ink);
  padding: 10px 11px;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.faa-import-form .check,
.faa-import-options .check,
.faa-candidate .check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faa-import-form .check input,
.faa-import-options .check input,
.faa-candidate .check input {
  width: auto;
}

.faa-import-options {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
  gap: 14px;
  align-items: center;
  margin: 18px 0 22px;
  border: 1px solid rgba(17,17,16,.12);
  background: rgba(255,255,255,.42);
  padding: 14px;
}

.faa-candidate-list {
  display: grid;
  gap: 14px;
}

.faa-candidate {
  display: grid;
  grid-template-columns: 80px 150px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(17,17,16,.16);
  background: rgba(251,248,243,.70);
  padding: 14px;
}

.faa-candidate.is-duplicate {
  border-color: rgba(124,30,23,.42);
  background: rgba(124,30,23,.06);
}

.faa-candidate img,
.faa-no-image {
  width: 150px;
  height: 120px;
  object-fit: contain;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(17,17,16,.04);
}

.faa-no-image {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
  box-sizing: border-box;
}

.faa-candidate-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.faa-candidate-fields .wide {
  grid-column: 1 / -1;
}

.duplicate-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #7c1e17;
  font-weight: 700;
}

.faa-candidate-fields a {
  grid-column: 1 / -1;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}

.faa-import-log {
  color: var(--muted);
  line-height: 1.8;
}

.admin-import-note a {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}

@media(max-width: 1100px) {
  .faa-import-form,
  .faa-import-options,
  .faa-candidate,
  .faa-candidate-fields {
    grid-template-columns: 1fr;
  }

  .faa-candidate img,
  .faa-no-image {
    width: 100%;
    height: 220px;
  }
}


/* v3.9 Safe FAA owner-locked importer */
.owner-lock-note {
  border-left: 3px solid rgba(124,30,23,.62);
  padding: 10px 12px;
  background: rgba(124,30,23,.06);
}
.owner-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: #4d795e;
  font-weight: 700;
}


/* v4.0 Admin bulk publish controls */

.admin-list-head-bulk {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 620px);
  gap: 20px;
  align-items: start;
}

.bulk-publish-form {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.bulk-select-tools,
.bulk-submit-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.bulk-select-tools button,
.bulk-submit-tools button {
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.70);
  color: var(--ink);
  padding: 9px 11px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

.bulk-submit-tools button[name="bulk_mode"][value="publish"] {
  background: var(--ink);
  color: var(--paper);
}

.bulk-count {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
  padding: 9px 0;
}

.admin-art-card {
  position: relative;
}

.bulk-card-select {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(251,248,243,.90);
  color: var(--ink);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

.bulk-card-select input {
  margin: 0;
}

.bulk-card-select:has(input:checked) {
  background: var(--ink);
  color: var(--paper);
}

.bulk-card-select:has(input:checked) + .message + .admin-thumb,
.bulk-card-select:has(input:checked) ~ .admin-thumb {
  outline: 3px solid rgba(199,174,42,.62);
  outline-offset: 3px;
}

@media(max-width: 980px) {
  .admin-list-head-bulk {
    grid-template-columns: 1fr;
  }

  .bulk-publish-form,
  .bulk-select-tools,
  .bulk-submit-tools {
    justify-items: stretch;
    justify-content: stretch;
  }

  .bulk-select-tools button,
  .bulk-submit-tools button {
    flex: 1 1 140px;
  }
}


/* v4.1 Artwork room readability: white text with black edge */

.artwork-room-page .art-room-info {
  padding: 18px 18px 18px 0 !important;
  border-radius: 18px !important;
}

.artwork-room-page .art-room-info,
.artwork-room-page .art-room-info *,
.artwork-room-page .art-room-info p,
.artwork-room-page .art-room-info .artwork-line,
.artwork-room-page .art-room-info .artwork-collection,
.artwork-room-page .art-room-info .artwork-description,
.artwork-room-page .art-room-info .kicker,
.artwork-room-page .art-room-info .link-arrow {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.92),
     1px -1px 0 rgba(0,0,0,.92),
    -1px  1px 0 rgba(0,0,0,.92),
     1px  1px 0 rgba(0,0,0,.92),
     0 2px 9px rgba(0,0,0,.82),
     0 0 18px rgba(0,0,0,.62) !important;
}

.artwork-room-page .art-room-info h1 {
  color: #fff !important;
  -webkit-text-stroke: .65px rgba(0,0,0,.82);
  text-shadow:
    -1.4px -1.4px 0 rgba(0,0,0,.96),
     1.4px -1.4px 0 rgba(0,0,0,.96),
    -1.4px  1.4px 0 rgba(0,0,0,.96),
     1.4px  1.4px 0 rgba(0,0,0,.96),
     0 3px 12px rgba(0,0,0,.88),
     0 0 24px rgba(0,0,0,.70) !important;
}

.artwork-room-page .art-room-info::before {
  content: "";
  position: absolute;
  inset: -16px -10px -16px -22px;
  z-index: -1;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.08), transparent);
  pointer-events: none;
}

/* v4.1 Auto Collection Sort */

.auto-collections-page {
  max-width: 1500px;
}

.auto-collection-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px 190px auto;
  gap: 14px;
  align-items: end;
}

.auto-collection-form label,
.auto-target {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.auto-collection-form input,
.auto-target input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17,17,16,.20);
  background: rgba(255,255,255,.74);
  color: var(--ink);
  padding: 10px 11px;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.collection-count-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.collection-count-strip span {
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(255,255,255,.54);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--muted);
}

.auto-collection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 18px;
}

.auto-collection-actions button {
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

.auto-collection-actions button[type="submit"] {
  background: var(--ink);
  color: var(--paper);
}

.auto-collection-actions span {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.auto-collection-table {
  display: grid;
  gap: 12px;
}

.auto-collection-row {
  display: grid;
  grid-template-columns: 80px 120px minmax(0, 1fr) minmax(220px, 290px);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(251,248,243,.70);
  padding: 12px;
}

.auto-collection-row.auto-selected {
  border-color: rgba(199,174,42,.62);
  background: rgba(199,174,42,.08);
}

.auto-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--ink);
}

.auto-thumb img {
  width: 120px;
  height: 90px;
  object-fit: contain;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(255,255,255,.48);
}

.auto-main h3 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  letter-spacing: .04em;
}

.auto-main p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 13px;
}

.auto-main a {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}

@media(max-width: 1000px) {
  .auto-collection-form,
  .auto-collection-row {
    grid-template-columns: 1fr;
  }

  .auto-thumb img {
    width: 100%;
    height: 180px;
  }
}


/* v4.2 Post-fact enrichment + visitor counter */

.visitor-counter-grid {
  border-top: 1px solid rgba(17,17,16,.10);
}

.visitor-counter-grid strong {
  font-size: clamp(18px, 2.1vw, 30px) !important;
  word-break: break-word;
}

.admin-faa-source-link {
  margin: 6px 0 0;
}

.admin-faa-source-link a {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}

.enrich-page {
  max-width: 1540px;
}

.enrich-control-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.3fr) 110px 160px minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.enrich-control-form label,
.enrich-fields label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.enrich-control-form input,
.enrich-control-form select,
.enrich-fields input,
.enrich-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17,17,16,.20);
  background: rgba(255,255,255,.74);
  color: var(--ink);
  padding: 10px 11px;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.enrich-control-form .check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enrich-control-form .check input {
  width: auto;
}

.enrich-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 18px;
}

.enrich-actions button {
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

.enrich-actions button[type="submit"] {
  background: var(--ink);
  color: var(--paper);
}

.enrich-actions span {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.enrich-list {
  display: grid;
  gap: 14px;
}

.enrich-row {
  display: grid;
  grid-template-columns: 78px 124px minmax(0, 1fr) minmax(320px, 460px);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(251,248,243,.70);
  padding: 12px;
}

.enrich-row.auto-selected {
  border-color: rgba(199,174,42,.62);
  background: rgba(199,174,42,.08);
}

.enrich-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--ink);
}

.enrich-thumb img {
  width: 124px;
  height: 96px;
  object-fit: contain;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(255,255,255,.48);
}

.enrich-main h3 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  letter-spacing: .04em;
}

.enrich-main p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 13px;
}

.enrich-main a {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}

.enrich-fields {
  display: grid;
  gap: 10px;
}

.enrich-fields textarea {
  min-height: 130px;
}

@media(max-width: 1120px) {
  .enrich-control-form,
  .enrich-row {
    grid-template-columns: 1fr;
  }

  .enrich-thumb img {
    width: 100%;
    height: 180px;
  }
}


/* v4.4 Individual artwork readable panel + FAA purchase button */

.artwork-room-page .art-room-info {
  position: relative !important;
  z-index: 3 !important;
  max-width: min(460px, 31vw) !important;
  padding: 26px 28px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background:
    radial-gradient(circle at 5% 0%, rgba(255,255,255,.12), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.36) 70%, rgba(0,0,0,.18)) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

.artwork-room-page .art-room-info::before {
  content: none !important;
}

.artwork-room-page .art-room-info,
.artwork-room-page .art-room-info p,
.artwork-room-page .art-room-info .kicker,
.artwork-room-page .art-room-info .artwork-line,
.artwork-room-page .art-room-info .artwork-description,
.artwork-room-page .art-room-info .artwork-collection,
.artwork-room-page .art-room-info .link-arrow {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0 3px 12px rgba(0,0,0,.78) !important;
}

.artwork-room-page .art-room-info h1 {
  color: #fff !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  font-size: clamp(38px, 4.3vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: .085em !important;
  -webkit-text-stroke: 1px rgba(0,0,0,.86) !important;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,.96),
     1.5px -1.5px 0 rgba(0,0,0,.96),
    -1.5px  1.5px 0 rgba(0,0,0,.96),
     1.5px  1.5px 0 rgba(0,0,0,.96),
     0 4px 18px rgba(0,0,0,.82) !important;
}

.artwork-room-page .art-room-info .artwork-description {
  max-width: 34em !important;
  margin: 16px 0 14px !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
}

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

.faa-purchase-button {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 4px 0 14px !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(255,255,255,.64) !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.92) !important;
  color: #111214 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30) !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.faa-purchase-button:hover {
  background: #fff !important;
  transform: translateY(-1px);
}

@media(max-width: 980px) {
  .artwork-room-page .art-room-info {
    max-width: none !important;
    margin: 0 16px !important;
  }
  .artwork-room-page .art-room-info h1 {
    font-size: clamp(34px, 10vw, 58px) !important;
  }
}


/* v4.5 Multi-Collection Visual Sorting */

.work-secondary-chips,
.artwork-secondary-collections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.work-secondary-chips em,
.artwork-secondary-collections em {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.48);
  color: var(--muted);
  padding: 4px 6px;
  font-style: normal;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 9px;
}

.artwork-secondary-collections {
  margin: 8px 0 14px;
}

.artwork-secondary-collections span {
  color: #fff !important;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 10px;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90),
     0 3px 12px rgba(0,0,0,.78) !important;
}

.artwork-secondary-collections em {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.18);
  color: #fff !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.90),
     1px -1px 0 rgba(0,0,0,.90),
    -1px  1px 0 rgba(0,0,0,.90),
     1px  1px 0 rgba(0,0,0,.90) !important;
}

.multi-collections-page {
  max-width: 1540px;
}

.multi-collection-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px 160px auto;
  gap: 14px;
  align-items: end;
}

.multi-collection-controls label,
.multi-fields label,
.multi-secondary span {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.multi-collection-controls input,
.multi-collection-controls select,
.multi-fields select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17,17,16,.20);
  background: rgba(255,255,255,.74);
  color: var(--ink);
  padding: 10px 11px;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}

.multi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 18px;
}

.multi-actions button {
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

.multi-actions button[type="submit"] {
  background: var(--ink);
  color: var(--paper);
}

.multi-actions span {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.multi-list {
  display: grid;
  gap: 14px;
}

.multi-row {
  display: grid;
  grid-template-columns: 76px 128px minmax(0, 1fr) minmax(320px, 470px);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(251,248,243,.70);
  padding: 12px;
}

.multi-row.auto-selected {
  border-color: rgba(199,174,42,.62);
  background: rgba(199,174,42,.08);
}

.multi-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--ink);
}

.multi-thumb img {
  width: 128px;
  height: 100px;
  object-fit: contain;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(255,255,255,.48);
}

.multi-main h3 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  letter-spacing: .04em;
}

.multi-main p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 13px;
}

.multi-main a {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}

.multi-fields {
  display: grid;
  gap: 12px;
}

.multi-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}

.multi-secondary span {
  grid-column: 1 / -1;
}

.multi-secondary label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 11px;
}

@media(max-width: 1120px) {
  .multi-collection-controls,
  .multi-row {
    grid-template-columns: 1fr;
  }

  .multi-thumb img {
    width: 100%;
    height: 190px;
  }
}


/* v4.6 Artwork page text refinement
   The panel carries contrast now; text no longer relies on heavy noisy outlines.
*/

.artwork-room-page .art-room-info {
  width: min(430px, 29vw) !important;
  max-width: min(430px, 29vw) !important;
  min-width: 310px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 24px 26px 22px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background:
    linear-gradient(90deg, rgba(8,9,12,.72), rgba(15,16,22,.58) 72%, rgba(15,16,22,.38)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

.artwork-room-page .art-room-info::before {
  content: none !important;
}

.artwork-room-page .art-room-info .kicker {
  margin-bottom: 12px !important;
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.65) !important;
}

.artwork-room-page .art-room-info h1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(28px, 2.55vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: .105em !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.85),
    0 8px 22px rgba(0,0,0,.78) !important;
}

.artwork-room-page .art-room-info p,
.artwork-room-page .art-room-info .artwork-line,
.artwork-room-page .art-room-info .artwork-description,
.artwork-room-page .art-room-info .artwork-collection,
.artwork-room-page .art-room-info .link-arrow {
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.78) !important;
}

.artwork-room-page .art-room-info .artwork-line,
.artwork-room-page .art-room-info .artwork-collection {
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  letter-spacing: .105em !important;
}

.artwork-room-page .art-room-info .artwork-description {
  max-width: 32em !important;
  margin: 15px 0 16px !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
}

.artwork-secondary-collections {
  margin: 8px 0 14px !important;
}

.artwork-secondary-collections span,
.artwork-secondary-collections em {
  text-shadow: 0 2px 8px rgba(0,0,0,.74) !important;
}

.artwork-secondary-collections em {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.26) !important;
}

.faa-purchase-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 2px 0 16px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.96) !important;
  color: #111214 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.34) !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.faa-purchase-button:hover {
  background: #fff !important;
  color: #000 !important;
  transform: translateY(-1px);
}

.artwork-room-page .art-room-info .link-arrow {
  display: inline-block !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.38) !important;
  padding-top: 12px !important;
  width: 100% !important;
}

@media(max-width: 1100px) {
  .artwork-room-page .art-room-info {
    width: min(420px, 34vw) !important;
    max-width: min(420px, 34vw) !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(26px, 3.2vw, 38px) !important;
  }
}

@media(max-width: 760px) {
  .artwork-room-page .art-room-info {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 16px !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(28px, 9vw, 42px) !important;
  }

  .faa-purchase-button {
    width: 100% !important;
  }
}


/* v4.8 SEO Coverage + photography-aware sorting */

.seo-coverage-page {
  max-width: 1500px;
}

.seo-coverage-filter {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.seo-coverage-filter label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.seo-coverage-filter select {
  border: 1px solid rgba(17,17,16,.20);
  background: rgba(255,255,255,.74);
  color: var(--ink);
  padding: 10px 11px;
  font-family: var(--body-font, system-ui, sans-serif);
}

.seo-coverage-filter button,
.seo-coverage-filter a {
  border: 1px solid rgba(17,17,16,.18);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 13px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  text-decoration: none;
}

.seo-coverage-list {
  display: grid;
  gap: 12px;
}

.seo-row {
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(251,248,243,.70);
  padding: 12px;
}

.seo-row.seo-ok {
  border-color: rgba(77,121,94,.35);
}

.seo-row.seo-needs-work {
  border-color: rgba(124,30,23,.35);
  background: rgba(124,30,23,.055);
}

.seo-row img {
  width: 115px;
  height: 86px;
  object-fit: contain;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(17,17,16,.14);
}

.seo-row h3 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  letter-spacing: .04em;
}

.seo-row p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
}

.seo-keywords {
  font-size: 11px !important;
  opacity: .85;
}

.seo-issues {
  color: #7c1e17 !important;
  font-weight: 700;
}

.seo-row a {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
}


/* v5.0 Front page live updates */

.collections .collection-meta,
.recent-meta {
  white-space: normal;
}

.collection-card .collection-meta::before {
  content: "Live count · ";
  opacity: .68;
}


/* v5.1 Admin mobile login stability */

.admin-login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.admin-login-card {
  width: min(100%, 520px);
}

.admin-login-form {
  max-width: 520px;
}

.admin-login-form label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-login-form input[type="email"],
.admin-login-form input[type="password"],
.admin-login-form input[type="text"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  font-size: 16px;
}

.admin-show-password {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px !important;
  font-family: var(--body-font, system-ui, sans-serif);
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

.admin-show-password input {
  width: auto !important;
  min-height: 0 !important;
}

.admin-login-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.message.error {
  border-color: rgba(124,30,23,.35);
  background: rgba(124,30,23,.08);
  color: #7c1e17;
}

@media(max-width: 640px) {
  .admin-login-page {
    align-items: start;
    padding: 16px;
  }

  .admin-login-card .page-title {
    font-size: clamp(34px, 11vw, 54px);
  }
}


.admin-diagnostic-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-diagnostic-table th,
.admin-diagnostic-table td {
  border-bottom: 1px solid rgba(17,17,16,.12);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.admin-diagnostic-table th {
  width: 220px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}


/* v5.3 Upload field clarity */

.upload-file-field {
  border: 1px solid rgba(17,17,16,.16);
  background: rgba(255,255,255,.48);
  padding: 12px;
}

.upload-file-field.required-file {
  border-color: rgba(124,30,23,.32);
  background: rgba(124,30,23,.035);
}

.upload-file-field .file-note {
  display: block;
  margin: 4px 0 8px;
  color: var(--muted);
  font-family: var(--body-font, system-ui, sans-serif);
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
  line-height: 1.35;
}

.upload-file-field input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,16,.16);
}

.selected-file-name {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

@media(max-width: 720px) {
  .upload-file-field {
    grid-column: 1 / -1;
  }
}


/* v5.4 Upload limit/preflight notes */

.upload-limit-note,
.upload-client-warning {
  grid-column: 1 / -1;
  border-left: 4px solid rgba(199,174,42,.9);
  background: rgba(199,174,42,.08);
  padding: 12px 14px;
}

.upload-client-warning {
  border-left-color: rgba(124,30,23,.55);
  background: rgba(124,30,23,.055);
}


/* v5.5 Artwork Room Fit + Title Line Fix
   Makes artwork auto-fit the viewport space and keeps normal-length titles on one line.
*/

.artwork-room-page {
  overflow-x: hidden !important;
}

.artwork-room-page .art-room {
  min-height: calc(100svh - 112px) !important;
  height: calc(100svh - 112px) !important;
  display: grid !important;
  grid-template-columns: minmax(310px, 430px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 72px) !important;
  padding: clamp(18px, 2.6vw, 42px) clamp(28px, 3.7vw, 70px) 86px !important;
  box-sizing: border-box !important;
}

.artwork-room-page .art-room-stage,
.artwork-room-page .art-stage,
.artwork-room-page .artwork-stage,
.artwork-room-page .viewer-stage,
.artwork-room-page .art-room-image,
.artwork-room-page .artwork-display,
.artwork-room-page .artwork-main {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: calc(100svh - 210px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.artwork-room-page .art-room-stage img,
.artwork-room-page .art-stage img,
.artwork-room-page .artwork-stage img,
.artwork-room-page .viewer-stage img,
.artwork-room-page .art-room-image img,
.artwork-room-page .artwork-display img,
.artwork-room-page .artwork-main img,
.artwork-room-page .artwork-image,
.artwork-room-page .room-artwork,
.artwork-room-page .featured-artwork,
.artwork-room-page main img[src*="uploads/art/full"],
.artwork-room-page main img[src*="uploads/art/thumbs"] {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 68vw) !important;
  max-height: calc(100svh - 230px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  box-sizing: border-box !important;
}

.artwork-room-page .art-frame,
.artwork-room-page .artwork-frame,
.artwork-room-page .frame-shell,
.artwork-room-page .room-frame {
  max-width: min(100%, 68vw) !important;
  max-height: calc(100svh - 220px) !important;
  width: fit-content !important;
  height: fit-content !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.artwork-room-page .art-frame img,
.artwork-room-page .artwork-frame img,
.artwork-room-page .frame-shell img,
.artwork-room-page .room-frame img {
  max-width: min(100%, 68vw) !important;
  max-height: calc(100svh - 245px) !important;
  object-fit: contain !important;
}

/* Title panel: cleaner sizing + one line for regular title lengths */
.artwork-room-page .art-room-info {
  width: min(430px, 27vw) !important;
  max-width: min(430px, 27vw) !important;
  min-width: 330px !important;
}

.artwork-room-page .art-room-info h1 {
  font-size: clamp(24px, 1.95vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: .095em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}

.artwork-room-page .art-room-info .artwork-description {
  font-size: 14px !important;
  line-height: 1.58 !important;
}

/* Controls should stay below the artwork and not steal vertical fit space. */
.artwork-room-page .art-room-controls,
.artwork-room-page .viewer-controls,
.artwork-room-page .background-controls,
.artwork-room-page .frame-controls {
  max-width: min(840px, 52vw) !important;
}

/* Wide artwork gets a little more breathing room on desktop. */
@media(min-width: 1280px) {
  .artwork-room-page .art-room {
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr) !important;
  }

  .artwork-room-page .art-room-stage img,
  .artwork-room-page .art-stage img,
  .artwork-room-page .artwork-stage img,
  .artwork-room-page .viewer-stage img,
  .artwork-room-page .art-room-image img,
  .artwork-room-page .artwork-display img,
  .artwork-room-page .artwork-main img,
  .artwork-room-page .artwork-image,
  .artwork-room-page .room-artwork,
  .artwork-room-page .featured-artwork,
  .artwork-room-page main img[src*="uploads/art/full"],
  .artwork-room-page main img[src*="uploads/art/thumbs"],
  .artwork-room-page .art-frame,
  .artwork-room-page .artwork-frame,
  .artwork-room-page .frame-shell,
  .artwork-room-page .room-frame {
    max-width: min(100%, 70vw) !important;
  }
}

/* Smaller laptops/tablets: keep title readable, allow wrapping only when space is genuinely tight. */
@media(max-width: 1180px) {
  .artwork-room-page .art-room {
    grid-template-columns: minmax(285px, 390px) minmax(0, 1fr) !important;
    gap: 28px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .artwork-room-page .art-room-info {
    width: min(390px, 33vw) !important;
    max-width: min(390px, 33vw) !important;
    min-width: 285px !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(22px, 2.25vw, 34px) !important;
    letter-spacing: .08em !important;
  }

  .artwork-room-page .art-room-stage img,
  .artwork-room-page .art-stage img,
  .artwork-room-page .artwork-stage img,
  .artwork-room-page .viewer-stage img,
  .artwork-room-page .art-room-image img,
  .artwork-room-page .artwork-display img,
  .artwork-room-page .artwork-main img,
  .artwork-room-page .artwork-image,
  .artwork-room-page .room-artwork,
  .artwork-room-page .featured-artwork,
  .artwork-room-page main img[src*="uploads/art/full"],
  .artwork-room-page main img[src*="uploads/art/thumbs"] {
    max-width: min(100%, 62vw) !important;
  }
}

/* Mobile: stack naturally and let titles wrap again. */
@media(max-width: 820px) {
  .artwork-room-page .art-room {
    height: auto !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 18px 16px 88px !important;
    gap: 22px !important;
  }

  .artwork-room-page .art-room-info {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .artwork-room-page .art-room-info h1 {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(28px, 9vw, 42px) !important;
  }

  .artwork-room-page .art-room-stage,
  .artwork-room-page .art-stage,
  .artwork-room-page .artwork-stage,
  .artwork-room-page .viewer-stage,
  .artwork-room-page .art-room-image,
  .artwork-room-page .artwork-display,
  .artwork-room-page .artwork-main {
    max-height: none !important;
  }

  .artwork-room-page .art-room-stage img,
  .artwork-room-page .art-stage img,
  .artwork-room-page .artwork-stage img,
  .artwork-room-page .viewer-stage img,
  .artwork-room-page .art-room-image img,
  .artwork-room-page .artwork-display img,
  .artwork-room-page .artwork-main img,
  .artwork-room-page .artwork-image,
  .artwork-room-page .room-artwork,
  .artwork-room-page .featured-artwork,
  .artwork-room-page main img[src*="uploads/art/full"],
  .artwork-room-page main img[src*="uploads/art/thumbs"] {
    max-width: 100% !important;
    max-height: 70svh !important;
  }

  .artwork-room-page .art-frame,
  .artwork-room-page .artwork-frame,
  .artwork-room-page .frame-shell,
  .artwork-room-page .room-frame {
    max-width: 100% !important;
    max-height: 70svh !important;
  }
}


/* v5.6 Homepage Featured Image Fit + Clickable Hero
   Homepage featured image now behaves as a real artwork preview:
   full image visible, no forced cover crop, and the image area links to the artwork page.
*/

.hero {
  overflow: hidden !important;
}

.hero-art-stage {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: clamp(24px, 3.2vw, 54px) clamp(28px, 4vw, 76px) clamp(24px, 3.2vw, 54px) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.hero-art-wrap,
.hero-art-link {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: min(100%, 1040px) !important;
  max-height: calc(100vh - 190px) !important;
  min-height: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  cursor: pointer !important;
  contain: none !important;
}

.hero-art-wrap::before,
.hero-art-link::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,.86) 0%, rgba(247,243,238,.44) 12%, rgba(247,243,238,.09) 28%, transparent 54%) !important;
  opacity: 1 !important;
}

.hero-art,
.hero-art.effect-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 210px) !important;
  object-fit: contain !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;
}

.hero-art-link:hover .hero-art,
.hero-art-wrap:hover .hero-art {
  transform: scale(1.006);
  transition: transform .24s ease;
}

.hero-sheen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Latest uploads / works strip: keep titles on one line by reducing tracking and using ellipsis. */
.recent-title,
.recent-card h3,
.dark-strip .recent-title,
.dark-strip h3 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  letter-spacing: .055em !important;
  line-height: 1.25 !important;
}

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

.recent-card img {
  object-fit: contain !important;
}

/* If a title is short enough, it now fits; if extremely long, it truncates cleanly instead of wrapping. */
@media(max-width: 1100px) {
  .hero-art-stage {
    padding-right: 26px !important;
  }

  .hero-art,
  .hero-art.effect-art {
    max-height: calc(100vh - 230px) !important;
  }

  .recent-title,
  .recent-card h3,
  .dark-strip .recent-title,
  .dark-strip h3 {
    font-size: 10px !important;
    letter-spacing: .035em !important;
  }
}

@media(max-width: 900px) {
  .hero-art-stage {
    padding: 18px 18px 34px !important;
  }

  .hero-art-wrap,
  .hero-art-link {
    max-height: none !important;
  }

  .hero-art,
  .hero-art.effect-art {
    max-width: 100% !important;
    max-height: 58svh !important;
  }
}


/* v5.7 Homepage Hero Clean Autofit
   Removes old palette/status artifacts and forces the featured image to fit as artwork.
*/

.home-page .palette-panel,
.home-page .image-palette-panel,
.hero .palette-panel,
.hero .image-palette-panel,
.hero-status-note {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove all old generated hero squares, glows, masks, and overlay leftovers. */
.hero-art-stage::before,
.hero-art-stage::after,
.hero-art-wrap::before,
.hero-art-wrap::after,
.hero-art-link::before,
.hero-art-link::after,
.hero-sheen {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Deterministic homepage layout: left copy + right artwork area. */
.hero {
  min-height: auto !important;
  height: clamp(500px, calc(100svh - 190px), 640px) !important;
  max-height: 640px !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 39%) minmax(0, 61%) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.hero-meta {
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  padding: clamp(52px, 6vw, 92px) clamp(36px, 5vw, 76px) clamp(46px, 5vw, 76px) clamp(46px, 5vw, 82px) !important;
}

.hero-art-stage {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: clamp(22px, 3vw, 42px) clamp(42px, 4.8vw, 86px) clamp(22px, 3vw, 42px) clamp(18px, 2.3vw, 36px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* The hero link is the artwork frame. It fills the right-side space but does not crop. */
.hero-art-wrap,
.hero-art-link {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Actual featured image: always show the whole artwork. */
.hero-art,
.hero-art.effect-art {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Keep a subtle hover without changing fit. */
.hero-art-link:hover .hero-art,
.hero-art-wrap:hover .hero-art {
  transform: none !important;
  filter: saturate(1.03) contrast(1.01) !important;
}

/* Latest Uploads card art should remain contained and titles one-line. */
.recent-card img {
  object-fit: contain !important;
  object-position: center center !important;
}

.recent-title,
.recent-card h3,
.dark-strip .recent-title,
.dark-strip h3 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Medium screens. */
@media(max-width: 1100px) {
  .hero {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
  }

  .hero-meta {
    padding: 42px 32px 24px !important;
  }

  .hero-art-stage {
    height: min(62svh, 520px) !important;
    padding: 18px 32px 36px !important;
  }

  .hero-art,
  .hero-art.effect-art {
    max-height: 100% !important;
  }
}

/* Mobile. */
@media(max-width: 760px) {
  .hero-art-stage {
    height: min(58svh, 460px) !important;
    padding: 16px 18px 28px !important;
  }

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


/* v5.8 Artwork Title Containment
   Fixes long artwork titles spilling outside the info card.
   Short titles still stay visually compact; long titles wrap cleanly inside the panel.
*/

.artwork-room-page .art-room-info {
  overflow: hidden !important;
  contain: layout paint !important;
  box-sizing: border-box !important;
}

.artwork-room-page .art-room-info *,
.artwork-room-page .art-room-info *::before,
.artwork-room-page .art-room-info *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.artwork-room-page .art-room-info h1 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
  font-size: clamp(22px, 1.62vw, 34px) !important;
  line-height: 1.14 !important;
  letter-spacing: .072em !important;
}

/* Keep very small titles from looking weak, while still allowing long ones to fit. */
@media(min-width: 1280px) {
  .artwork-room-page .art-room-info h1 {
    font-size: clamp(24px, 1.68vw, 36px) !important;
  }
}

/* Metadata and chips should wrap inside the card rather than pushing layout width. */
.artwork-room-page .artwork-secondary-collections,
.artwork-room-page .work-secondary-chips {
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow: hidden !important;
}

.artwork-room-page .artwork-secondary-collections em,
.artwork-room-page .work-secondary-chips em {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.25 !important;
}

/* The All Works link divider was able to stretch outside the card after previous fit patches. */
.artwork-room-page .art-room-info .link-arrow {
  width: auto !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.42) !important;
  padding-top: 8px !important;
  padding-bottom: 7px !important;
}

.artwork-room-page .art-room-info .link-arrow::before,
.artwork-room-page .art-room-info .link-arrow::after {
  display: none !important;
  content: none !important;
}

/* Body copy should remain inside the card. */
.artwork-room-page .art-room-info .artwork-description,
.artwork-room-page .art-room-info p {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* Smaller desktop/tablet: reduce title earlier instead of letting it collide. */
@media(max-width: 1180px) {
  .artwork-room-page .art-room-info h1 {
    font-size: clamp(21px, 2.05vw, 32px) !important;
    letter-spacing: .058em !important;
  }
}

@media(max-width: 820px) {
  .artwork-room-page .art-room-info {
    overflow: visible !important;
    contain: none !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(28px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: .075em !important;
    text-wrap: balance !important;
  }
}


/* v5.9 Mobile Navigation Drawer
   Replaces old fake ::after hamburger with a real working menu button.
*/

.vrf-header::after {
  content: none !important;
  display: none !important;
}

.mobile-menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1002;
}

.mobile-menu-toggle span {
  display: block;
  width: 34px;
  height: 4px;
  background: currentColor;
  border-radius: 10px;
  transition: transform .18s ease, opacity .18s ease;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

.mobile-menu-panel[hidden] {
  display: none !important;
}

.mobile-menu-panel {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 1001;
  background: rgba(251,248,243,.98);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 70px rgba(17,17,16,.18);
  backdrop-filter: blur(18px);
}

.mobile-menu-inner {
  display: grid;
  gap: 0;
  padding: 18px 28px 24px;
}

.mobile-menu-label {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}

.mobile-menu-inner a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-bottom: 1px solid rgba(17,17,16,.12);
  font-family: var(--title-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 16px;
}

.mobile-menu-inner a::after {
  content: "→";
  opacity: .45;
}

.mobile-menu-inner a.active {
  color: var(--accent);
}

.mobile-menu-location {
  margin-top: 18px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.mobile-menu-location strong {
  display: block;
  color: var(--ink);
}

html.mobile-menu-open,
html.mobile-menu-open body {
  overflow-x: hidden;
}

/* Tablet / mobile / mobile desktop-mode: show real drawer button. */
@media(max-width: 1180px) {
  .vrf-header {
    height: 84px !important;
    padding: 0 28px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    z-index: 1000 !important;
  }

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

  .identity-lockup img {
    width: min(260px, 63vw) !important;
    max-height: 60px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

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

  .mobile-menu-toggle {
    display: inline-flex !important;
  }
}

@media(max-width: 560px) {
  .vrf-header {
    height: 78px !important;
    padding: 0 20px !important;
  }

  .identity-lockup img {
    width: min(245px, 66vw) !important;
    max-height: 56px !important;
  }

  .mobile-menu-toggle {
    width: 52px;
    height: 52px;
  }

  .mobile-menu-toggle span {
    width: 31px;
    height: 4px;
  }

  .mobile-menu-panel {
    top: 78px;
  }

  .mobile-menu-inner {
    padding: 16px 22px 24px;
  }

  .mobile-menu-inner a {
    min-height: 56px;
    font-size: 15px;
  }
}

/* Large desktop keeps the normal nav visible and hides drawer controls. */
@media(min-width: 1181px) {
  .mobile-menu-toggle,
  .mobile-menu-panel {
    display: none !important;
  }
}


/* v6.0 Artwork Page Layout Stabilizer
   Hard-resets the individual artwork page after accumulated fit patches.
   Goals:
   - info panel does not overlap the artwork
   - artwork and controls share one centered column
   - controls sit directly under the artwork
   - no huge empty right-side drift
   - whole artwork remains visible, no crop
*/

.artwork-room-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
  grid-template-areas: "info artwork" !important;
  column-gap: clamp(36px, 4vw, 72px) !important;
  row-gap: 18px !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  min-height: calc(100svh - 126px) !important;
  height: calc(100svh - 126px) !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 46px) clamp(34px, 4vw, 76px) clamp(22px, 3vw, 38px) clamp(28px, 3vw, 52px) !important;
  box-sizing: border-box !important;
}

/* Info panel: real grid item, no accidental overlay. */
.artwork-room-page > .art-room-info {
  grid-area: info !important;
  position: relative !important;
  z-index: 3 !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Artwork column: one centered column for image + controls. */
.artwork-room-page > .art-room-center {
  grid-area: artwork !important;
  position: relative !important;
  z-index: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 18px !important;
  width: min(100%, 1120px) !important;
  max-width: calc(100vw - 560px) !important;
  height: min(100%, calc(100svh - 168px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Stage controls the actual image area. */
.artwork-room-page .art-room-stage {
  position: relative !important;
  z-index: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100svh - 238px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 26px 46px rgba(0,0,0,.28))
    drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important;
}

/* Image always fits inside stage. */
.artwork-room-page .art-room-stage img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100svh - 250px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
}

/* Frame modes stay attached to the image, not to a drifting container. */
.artwork-room-page .art-room-stage.frame-frameless img {
  border: 0 !important;
}

.artwork-room-page .art-room-stage.frame-white img {
  border: 2px solid rgba(248,244,236,.98) !important;
}

.artwork-room-page .art-room-stage.frame-black img {
  border: 2px solid rgba(17,18,18,.96) !important;
}

/* Controls: same column, directly under the image. */
.artwork-room-page .art-room-controls {
  position: relative !important;
  z-index: 2 !important;
  justify-self: center !important;
  align-self: start !important;
  width: min(100%, 860px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px 22px !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: rgba(17,18,18,.78) !important;
  color: var(--paper) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) !important;
}

/* Prevent old/global control rules from creating right drift. */
.artwork-room-page .viewer-controls,
.artwork-room-page .background-controls,
.artwork-room-page .frame-controls {
  max-width: 100% !important;
}

/* Typography stays contained inside panel. */
.artwork-room-page .art-room-info h1 {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance !important;
  font-size: clamp(24px, 1.72vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: .07em !important;
}

.artwork-room-page .art-room-info .artwork-description {
  max-width: 100% !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

/* Medium desktop / laptop. */
@media(max-width: 1240px) {
  .artwork-room-page {
    grid-template-columns: minmax(290px, 380px) minmax(0, 1fr) !important;
    column-gap: 28px !important;
    padding-left: 24px !important;
    padding-right: 28px !important;
  }

  .artwork-room-page > .art-room-center {
    max-width: calc(100vw - 460px) !important;
    width: 100% !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(22px, 2.05vw, 32px) !important;
  }
}

/* Tablet/mobile: stack cleanly. */
@media(max-width: 900px) {
  .artwork-room-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "info"
      "artwork" !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 18px 16px 28px !important;
    row-gap: 22px !important;
  }

  .artwork-room-page > .art-room-info {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    overflow: visible !important;
  }

  .artwork-room-page > .art-room-center {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    gap: 16px !important;
  }

  .artwork-room-page .art-room-stage {
    width: 100% !important;
    max-height: none !important;
  }

  .artwork-room-page .art-room-stage img {
    max-width: 100% !important;
    max-height: 68svh !important;
  }

  .artwork-room-page .art-room-controls {
    width: 100% !important;
    border-radius: 18px !important;
    justify-content: center !important;
  }
}

/* Small phones. */
@media(max-width: 560px) {
  .artwork-room-page {
    padding: 14px 12px 24px !important;
  }

  .artwork-room-page .art-room-info h1 {
    font-size: clamp(26px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .artwork-room-page .art-room-controls {
    gap: 10px 14px !important;
    padding: 12px !important;
  }

  .artwork-room-page .room-control-group {
    justify-content: center !important;
  }
}


/* v6.1 Admin Patch Installer */

.patch-installer-page {
  max-width: 1320px;
}

.patch-upload-form label {
  display: grid;
  gap: 8px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.patch-upload-form input[type="file"] {
  width: 100%;
  min-height: 46px;
  padding: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,17,16,.18);
  box-sizing: border-box;
  font-family: var(--body-font, system-ui, sans-serif);
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

.patch-file-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.patch-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(255,255,255,.50);
}

.patch-file strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 13px;
}

.patch-file span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.patch-file.existing {
  border-left: 4px solid rgba(199,174,42,.88);
}

.patch-file.new {
  border-left: 4px solid rgba(77,121,94,.58);
}

.patch-file.blocked {
  border-left: 4px solid rgba(124,30,23,.74);
  background: rgba(124,30,23,.06);
}

.patch-warning {
  border-left-color: rgba(199,174,42,.88);
}

.patch-backup-list {
  display: grid;
  gap: 12px;
}

.patch-backup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(17,17,16,.14);
  background: rgba(251,248,243,.70);
}

.patch-backup-card h3 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  letter-spacing: .06em;
}

.patch-backup-card p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 13px;
}

.patch-backup-card button,
.patch-apply-form button,
.patch-upload-form button {
  border: 1px solid rgba(17,17,16,.18);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 14px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  cursor: pointer;
}

@media(max-width: 760px) {
  .patch-file,
  .patch-backup-card {
    grid-template-columns: 1fr;
  }

  .patch-file span {
    white-space: normal;
  }
}


/* v6.2 Artwork Controls Gap
   Adds breathing room between artwork image/frame and the background/frame control bar.
*/

.artwork-room-page > .art-room-center {
  gap: clamp(30px, 3.6vh, 52px) !important;
}

.artwork-room-page .art-room-controls {
  margin-top: clamp(10px, 1.8vh, 22px) !important;
}

/* Preserve fit on short screens. */
@media(max-height: 760px) and (min-width: 901px) {
  .artwork-room-page > .art-room-center {
    gap: 24px !important;
  }

  .artwork-room-page .art-room-controls {
    margin-top: 8px !important;
  }

  .artwork-room-page .art-room-stage img {
    max-height: calc(100svh - 282px) !important;
  }
}

@media(max-width: 900px) {
  .artwork-room-page > .art-room-center {
    gap: 24px !important;
  }

  .artwork-room-page .art-room-controls {
    margin-top: 6px !important;
  }
}


/* v6.3 Footer Credits + Art Copyright */

.site-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding-left: clamp(22px, 3vw, 58px) !important;
  padding-right: clamp(22px, 3vw, 58px) !important;
  box-sizing: border-box !important;
}

.site-footer .footer-art-copyright {
  justify-self: start !important;
  text-align: left !important;
}

.site-footer .footer-dev-credit {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.site-footer .footer-location {
  justify-self: end !important;
  text-align: right !important;
}

.site-footer a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 2px !important;
}

.site-footer a:hover {
  opacity: .7 !important;
}

@media(max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .site-footer .footer-art-copyright,
  .site-footer .footer-dev-credit,
  .site-footer .footer-location {
    justify-self: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* v6.4 Single Black Footer Merge
   One footer only. Credits are incorporated into the existing black footer bar.
*/

.site-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 58px !important;
  padding: 14px clamp(22px, 3vw, 58px) !important;
  box-sizing: border-box !important;
  background: #111312 !important;
  color: rgba(247,243,238,.82) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.site-footer .footer-art-copyright {
  justify-self: start !important;
  text-align: left !important;
}

.site-footer .footer-dev-credit {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.site-footer .footer-location {
  justify-self: end !important;
  text-align: right !important;
}

.site-footer a {
  color: rgba(247,243,238,.95) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(247,243,238,.55) !important;
  padding-bottom: 2px !important;
}

.site-footer a:hover {
  opacity: .72 !important;
}

/* Guard against accidental second footer/legacy white strip styling. */
body > .site-footer + .site-footer {
  display: none !important;
}

@media(max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
  }

  .site-footer .footer-art-copyright,
  .site-footer .footer-dev-credit,
  .site-footer .footer-location {
    justify-self: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* v6.5 Original Footer Only
   Supreme-rule cleanup: one footer, no duplicate row, requested info inside original black bar.
*/

.site-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 58px !important;
  padding: 14px clamp(22px, 3vw, 58px) !important;
  box-sizing: border-box !important;
  background: #111312 !important;
  color: rgba(247,243,238,.82) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.site-footer .footer-art-copyright {
  justify-self: start !important;
  text-align: left !important;
}

.site-footer .footer-dev-credit {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.site-footer .footer-location {
  justify-self: end !important;
  text-align: right !important;
}

.site-footer a {
  color: rgba(247,243,238,.96) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(247,243,238,.55) !important;
  padding-bottom: 2px !important;
}

.site-footer a:hover {
  opacity: .72 !important;
}

/* If an old duplicate footer is still served by cached HTML, hide every site footer after the first. */
.site-footer ~ .site-footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* If the legacy footer's first row exists inside a non-semantic wrapper, collapse duplicate black bars. */
body > footer.site-footer:not(:first-of-type) {
  display: none !important;
}

@media(max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
  }

  .site-footer .footer-art-copyright,
  .site-footer .footer-dev-credit,
  .site-footer .footer-location {
    justify-self: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* v6.6 Original Footer Content Fix
   Use the original .footer only. No .site-footer layer.
*/

.footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 58px !important;
  padding: 14px clamp(22px, 3vw, 58px) !important;
  box-sizing: border-box !important;
  background: #111312 !important;
  color: rgba(247,243,238,.82) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .11em !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.footer .footer-art-copyright {
  justify-self: start !important;
  text-align: left !important;
}

.footer .footer-dev-credit {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.footer .footer-location {
  justify-self: end !important;
  text-align: right !important;
}

.footer a {
  color: rgba(247,243,238,.96) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(247,243,238,.55) !important;
  padding-bottom: 2px !important;
}

.footer a:hover {
  opacity: .72 !important;
}

/* The newer experimental footer must never render if stale cached output includes it. */
.site-footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

@media(max-width: 760px) {
  .footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
  }

  .footer .footer-art-copyright,
  .footer .footer-dev-credit,
  .footer .footer-location {
    justify-self: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* v6.7 Cross-Browser Hero + Debug Overlay Kill */

.vrf-debug-line,
.vrf-fit-debug,
.vrfit-debug,
.debug-line,
.layout-debug,
.fit-debug,
[data-vrfitdebug],
[data-debug-line],
body.vrfitdebug::before,
body.vrfitdebug::after,
html.vrfitdebug::before,
html.vrfitdebug::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html[class*="debug"] *,
body[class*="debug"] * {
  outline-color: transparent !important;
}

.home-page .hero,
body:not(.artwork-room-page) .hero {
  overflow: visible !important;
}

.home-page .hero-art-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.home-page .hero-art-wrap,
.home-page .hero-art-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.home-page .hero-art,
.home-page .hero-art.effect-art {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(62vh, 640px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  overflow: visible !important;
}

/* Mobile homepage: full image in normal flow, no clipped hero container. */
@media(max-width: 900px) {
  .home-page .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .home-page .hero-meta {
    width: 100% !important;
    max-width: none !important;
    padding: 42px clamp(24px, 8vw, 56px) 22px !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-art-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 18px clamp(18px, 5vw, 42px) 42px !important;
    overflow: visible !important;
  }

  .home-page .hero-art-wrap,
  .home-page .hero-art-link {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .home-page .hero-art,
  .home-page .hero-art.effect-art {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

@media(max-width: 560px) {
  .home-page .hero-meta {
    padding: 34px 28px 18px !important;
  }

  .home-page .hero-art-stage {
    padding: 14px 18px 34px !important;
  }
}

.home-page .hero-art-stage::before,
.home-page .hero-art-stage::after,
.home-page .hero-art-wrap::before,
.home-page .hero-art-wrap::after,
.home-page .hero-art-link::before,
.home-page .hero-art-link::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
}


/* v6.8 Desktop Hero Containment Fix
   Desktop Chrome/Firefox: contain featured image inside hero and stop overlap with Latest Uploads.
   Mobile keeps v6.7 normal-flow behavior.
*/

@media(min-width: 901px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 40%) minmax(0, 60%) !important;
    align-items: stretch !important;
    width: 100% !important;
    height: min(680px, calc(100svh - 118px)) !important;
    min-height: 560px !important;
    max-height: 680px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-meta {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 100% !important;
    padding: clamp(42px, 5vw, 84px) clamp(42px, 5vw, 88px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .home-page .hero-art-stage {
    position: relative !important;
    z-index: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: clamp(30px, 3.4vw, 58px) clamp(44px, 4.5vw, 82px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-art-wrap,
  .home-page .hero-art-link {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-art,
  .home-page .hero-art.effect-art {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-sizing: border-box !important;
  }

  .home-page .latest-section,
  .home-page .recent-section,
  .home-page .dark-strip {
    position: relative !important;
    z-index: 3 !important;
    clear: both !important;
  }
}

/* Wide desktop: keep the artwork large but still bounded. */
@media(min-width: 1500px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    height: min(700px, calc(100svh - 118px)) !important;
    max-height: 700px !important;
  }

  .home-page .hero-art-stage {
    padding-left: clamp(34px, 3vw, 64px) !important;
    padding-right: clamp(54px, 4vw, 94px) !important;
  }
}

/* Short desktop screens: reduce hero height so Latest Uploads stays visible and never overlaps. */
@media(min-width: 901px) and (max-height: 760px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    height: calc(100svh - 104px) !important;
    min-height: 500px !important;
    max-height: 620px !important;
  }

  .home-page .hero-art-stage {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .home-page .hero-meta {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}


/* v6.9 Chrome-Safe Desktop Hero Flow
   Removes desktop viewport-height dependency that caused Chromium to overlap hero with Latest Uploads.
   Desktop now uses natural content flow; mobile remains separate.
*/

@media(min-width: 901px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 40%) minmax(0, 60%) !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 650px !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
  }

  .home-page .hero-meta {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(58px, 5vw, 88px) clamp(42px, 5vw, 90px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .home-page .hero-actions {
    position: relative !important;
    z-index: 4 !important;
    flex-wrap: wrap !important;
    margin-bottom: 0 !important;
  }

  .home-page .hero-art-stage {
    position: relative !important;
    z-index: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: clamp(38px, 3.8vw, 64px) clamp(44px, 4.8vw, 86px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-art-wrap,
  .home-page .hero-art-link {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    max-width: min(100%, 1080px) !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-art,
  .home-page .hero-art.effect-art {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    /* Width-based height limit avoids Chrome/Firefox viewport UI differences. */
    max-height: clamp(430px, 34vw, 610px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-sizing: border-box !important;
  }

  .home-page .dark-strip {
    position: relative !important;
    z-index: 5 !important;
    clear: both !important;
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* Medium desktop / laptop: reduce hero safely, never overlap. */
@media(min-width: 901px) and (max-width: 1280px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%) !important;
    min-height: 610px !important;
  }

  .home-page .hero-meta {
    padding: 46px 38px 46px 54px !important;
  }

  .home-page .hero-art-stage {
    padding: 34px 34px !important;
  }

  .home-page .hero-art,
  .home-page .hero-art.effect-art {
    max-height: clamp(390px, 35vw, 540px) !important;
  }
}

/* Short Chromium windows: let page scroll instead of compressing/overlapping sections. */
@media(min-width: 901px) and (max-height: 760px) {
  .home-page .hero,
  body:not(.artwork-room-page) .hero {
    height: auto !important;
    min-height: 610px !important;
    max-height: none !important;
    overflow: hidden !important;
  }

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

  .home-page .hero-art-stage {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .home-page .hero-art,
  .home-page .hero-art.effect-art {
    max-height: min(520px, 34vw) !important;
  }
}


/* v7.0 Visitor Analytics */

.visitor-analytics-page {
  max-width: 1600px;
}

.analytics-range-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 20px 0;
}

.analytics-range-form label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}

.analytics-range-form select,
.analytics-range-form button {
  min-height: 42px;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.72);
  padding: 8px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.analytics-range-form button {
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

.analytics-summary-grid {
  margin-bottom: 20px;
}

.analytics-grid {
  display: grid;
  gap: 18px;
  margin: 18px 0;
}

.analytics-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-table {
  display: grid;
  gap: 8px;
}

.analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(17,17,16,.10);
  background: rgba(255,255,255,.45);
}

.analytics-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.analytics-row span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.analytics-table.compact .analytics-row {
  padding: 8px 10px;
}

.analytics-bars {
  display: grid;
  gap: 9px;
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
}

.analytics-bars.small .analytics-bar-row {
  grid-template-columns: 92px minmax(0, 1fr) 44px;
}

.analytics-bar-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.analytics-bar-row div {
  height: 10px;
  background: rgba(17,17,16,.09);
  overflow: hidden;
}

.analytics-bar-row i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.analytics-bar-row strong {
  text-align: right;
  font-size: 12px;
}

.analytics-hour-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(12px, 1fr));
  gap: 5px;
  align-items: end;
  min-height: 94px;
  padding-top: 18px;
}

.hour-cell {
  display: grid;
  gap: 5px;
  align-items: end;
  justify-items: center;
}

.hour-cell i {
  display: block;
  width: 100%;
  max-width: 18px;
  min-height: 4px;
  background: var(--accent);
}

.hour-cell span {
  font-size: 9px;
  color: var(--muted);
  transform: rotate(-55deg);
  transform-origin: center;
}

.recent-visits .analytics-row {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

@media(max-width: 1100px) {
  .analytics-grid.two,
  .analytics-grid.three {
    grid-template-columns: 1fr;
  }

  .analytics-row,
  .recent-visits .analytics-row {
    grid-template-columns: 1fr;
  }

  .analytics-row span {
    text-align: left;
  }
}

@media(max-width: 720px) {
  .analytics-hour-grid {
    grid-template-columns: repeat(12, minmax(12px, 1fr));
    row-gap: 18px;
  }

  .analytics-bar-row,
  .analytics-bars.small .analytics-bar-row {
    grid-template-columns: 78px minmax(0, 1fr) 42px;
  }
}


/* v7.1 Visitor Analytics Schema Repair */

.analytics-schema-repair-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 12px 14px;
  border-left: 4px solid rgba(199,174,42,.9);
  background: rgba(199,174,42,.08);
}

.analytics-schema-repair-form button {
  border: 1px solid rgba(17,17,16,.18);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  cursor: pointer;
}

.analytics-schema-repair-form span {
  color: var(--muted);
  font-size: 13px;
}


/* v7.2 Patch Installer Recovery */

.patch-system-panel {
  border-left: 4px solid rgba(199,174,42,.9);
}

.patch-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.patch-health-grid div {
  border: 1px solid rgba(17,17,16,.12);
  background: rgba(255,255,255,.42);
  padding: 10px 12px;
}

.patch-health-grid span {
  display: block;
  color: var(--muted);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  margin-bottom: 5px;
}

.patch-health-grid strong {
  font-size: 13px;
}

.patch-clean-form {
  margin: 0 0 14px;
}

.patch-clean-form button {
  border: 1px solid rgba(17,17,16,.16);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 9px 12px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  cursor: pointer;
}

@media(max-width: 900px) {
  .patch-health-grid {
    grid-template-columns: 1fr;
  }
}


/* v7.3 SEO Optimize All Unlocked */

.seo-coverage-page { max-width: 1500px; }
.seo-summary-grid { margin-bottom: 20px; }
.seo-actions-panel { border-left: 4px solid rgba(199,174,42,.9); }
.seo-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.seo-action-grid form,
.seo-chunk-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.seo-action-grid button,
.seo-chunk-form button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(17,17,16,.18);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 14px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  cursor: pointer;
}
.seo-chunk-form label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  color: var(--muted);
}
.seo-chunk-form select {
  min-height: 42px;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.72);
  padding: 8px 12px;
}
.seo-chunk-form .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.seo-row-list { display: grid; gap: 8px; }
.seo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(17,17,16,.11);
  background: rgba(255,255,255,.48);
}
.seo-row strong { display: block; overflow-wrap: anywhere; }
.seo-row span {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  margin-right: 10px;
}
.seo-row.error-row {
  border-left: 4px solid rgba(124,30,23,.75);
  background: rgba(124,30,23,.06);
}
@media(max-width: 900px) {
  .seo-action-grid { grid-template-columns: 1fr; }
  .seo-row { grid-template-columns: 1fr; }
}


/* v7.4 Collections / Auto Sort / Contact Fix */
.auto-collections-page { max-width: 1500px; }
.auto-actions-panel { border-left: 4px solid rgba(199,174,42,.9); }
.auto-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.auto-action-grid button,.auto-collections-page .admin-actions button { width:100%; min-height:44px; border:1px solid rgba(17,17,16,.18); background:var(--ink); color:var(--paper); padding:11px 14px; font-family:var(--title-font); text-transform:uppercase; letter-spacing:.09em; font-size:10px; cursor:pointer; }
.collection-count-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.collection-count-grid div { padding:12px; border:1px solid rgba(17,17,16,.12); background:rgba(255,255,255,.45); }
.collection-count-grid strong,.collection-count-grid span{display:block}.collection-count-grid span{color:var(--muted);font-size:12px;margin-top:4px}
.auto-collection-list{display:grid;gap:10px}.auto-collection-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:start;padding:12px;border:1px solid rgba(17,17,16,.12);background:rgba(255,255,255,.45)}.auto-collection-row strong{display:block;overflow-wrap:anywhere}.auto-collection-row span{color:var(--muted);font-size:12px}.auto-suggested{display:flex;flex-wrap:wrap;gap:8px}.auto-suggested label{display:inline-flex;gap:6px;align-items:center;padding:6px 8px;border:1px solid rgba(17,17,16,.14);background:rgba(255,255,255,.62);font-size:12px}.auto-suggested small{color:var(--muted)}
@media(max-width:900px){.auto-action-grid,.collection-count-grid,.auto-collection-row{grid-template-columns:1fr}}


/* v7.5 Visitor Country Detection */

.country-diagnostics-panel {
  border-left: 4px solid rgba(199,174,42,.9);
  margin: 18px 0;
}

.country-detected-card {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(17,17,16,.12);
  background: rgba(255,255,255,.56);
  margin: 12px 0;
}

.country-detected-card strong {
  font-size: 22px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.country-detected-card span {
  color: var(--muted);
  font-size: 13px;
}

.country-header-details summary {
  cursor: pointer;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  margin: 12px 0;
}

.country-setup-list {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.country-setup-list code {
  background: rgba(17,17,16,.08);
  padding: 2px 5px;
}


/* v7.6 Contact Mail cPanel Delivery Fix */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 28px;
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 4vw, 42px);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(17,17,16,.12);
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.84);
  color: var(--ink);
  padding: 12px 13px;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form button,
.mail-test-form button {
  min-height: 44px;
  border: 1px solid rgba(17,17,16,.18);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 14px;
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  cursor: pointer;
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  opacity: 0 !important;
}

.contact-note,
.mail-diagnostic-panel {
  border-left: 4px solid rgba(199,174,42,.9);
  background: rgba(255,255,255,.52);
  padding: 20px;
}

.mail-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mail-diagnostic-grid div {
  border: 1px solid rgba(17,17,16,.12);
  background: rgba(255,255,255,.46);
  padding: 10px 12px;
}

.mail-diagnostic-grid span {
  display: block;
  color: var(--muted);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 10px;
  margin-bottom: 5px;
}

.mail-diagnostic-grid strong {
  overflow-wrap: anywhere;
}

.mail-test-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.mail-test-form label {
  display: grid;
  gap: 7px;
  min-width: min(100%, 360px);
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  color: var(--muted);
}

.mail-test-form input {
  min-height: 42px;
  border: 1px solid rgba(17,17,16,.18);
  background: rgba(255,255,255,.84);
  padding: 10px 12px;
}

.mail-checklist {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

@media(max-width: 900px) {
  .contact-layout,
  .mail-diagnostic-grid {
    grid-template-columns: 1fr;
  }
}


/* v7.9 Randomized Collection Thumbnails */

.collections-page .collection-card-media {
  overflow: hidden;
}

.collections-page .collection-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.collections-page .collection-card {
  isolation: isolate;
}

.collections-page .collection-card-copy {
  position: relative;
  z-index: 2;
}

.collections-page .collection-card-media {
  position: relative;
  z-index: 1;
}

.collections-page .collection-empty-mark {
  min-height: 180px;
}


/* v8.0 Collections Visibility + Thumbnail Recovery */

.collections-page .collections-grid {
  min-height: 320px;
}

.collections-page .collection-card {
  text-decoration: none;
}

.collections-page .collection-card-media {
  overflow: hidden;
}

.collections-page .collection-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.collections-page .collection-empty-mark {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 180px;
  aspect-ratio: 4 / 3;
  background: rgba(17,17,16,.08);
  font-family: var(--title-font);
  letter-spacing: .22em;
  color: var(--muted);
}

.collection-card-fallback {
  pointer-events: auto;
}


/* v8.1 Public Collections Hard Recovery */

.collections-page .collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: clamp(22px, 3vw, 42px) !important;
  width: min(100% - 48px, 1760px) !important;
  margin: 28px auto 72px !important;
  min-height: 420px !important;
}

.collections-page .collection-card {
  display: grid !important;
  grid-template-columns: minmax(220px, .95fr) minmax(260px, 1.25fr) !important;
  min-height: 290px !important;
  border: 1px solid rgba(17,17,16,.16) !important;
  background: rgba(255,255,255,.42) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.collections-page .collection-card-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: clamp(28px, 4vw, 54px) !important;
  position: relative !important;
  z-index: 2 !important;
}

.collections-page .collection-number {
  display: block !important;
  font-family: var(--title-font) !important;
  font-size: clamp(30px, 2.6vw, 46px) !important;
  letter-spacing: .05em !important;
  line-height: 1 !important;
}

.collections-page .collection-card h2 {
  margin: 0 !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .22em !important;
  font-size: clamp(18px, 1.4vw, 28px) !important;
  line-height: 1.35 !important;
}

.collections-page .collection-count {
  display: block !important;
  font-family: var(--title-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.collections-page .collection-card-media {
  display: grid !important;
  place-items: center !important;
  min-height: 260px !important;
  background: rgba(17,17,16,.045) !important;
  padding: 22px !important;
  overflow: hidden !important;
}

.collections-page .collection-card-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 260px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.collections-page .collection-empty-mark {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 220px !important;
  background: rgba(17,17,16,.08) !important;
  font-family: var(--title-font) !important;
  letter-spacing: .22em !important;
  color: var(--muted) !important;
}

@media(max-width: 1000px) {
  .collections-page .collections-grid {
    grid-template-columns: 1fr !important;
    width: min(100% - 28px, 760px) !important;
  }

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


/* v8.2 Collections Page Safe Gutters + Header Clearance
   Prevent Collections content from touching the viewport edge or sitting too close to the top bar.
*/

.collections-page {
  box-sizing: border-box !important;
  width: 100% !important;
  overflow-x: hidden !important;
  padding-top: clamp(22px, 3.2vw, 52px) !important;
}

.collections-page .collections-hero,
.collections-page .page-hero.compact.collections-hero {
  width: min(100% - clamp(36px, 5.2vw, 108px), 1760px) !important;
  margin: 0 auto clamp(24px, 3vw, 42px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.collections-page .collections-hero > div,
.collections-page .page-hero.compact.collections-hero > div {
  max-width: 1180px !important;
}

.collections-page .collections-hero .kicker,
.collections-page .page-hero.compact.collections-hero .kicker {
  margin-bottom: clamp(16px, 2vw, 28px) !important;
}

.collections-page .collections-hero h1,
.collections-page .page-hero.compact.collections-hero h1 {
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 1.8vw, 22px) !important;
}

.collections-page .collections-hero p,
.collections-page .page-hero.compact.collections-hero p {
  max-width: 1180px !important;
  margin-bottom: 0 !important;
}

.collections-page .collections-grid {
  width: min(100% - clamp(36px, 5.2vw, 108px), 1760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(28px, 3vw, 46px) !important;
  box-sizing: border-box !important;
}

/* Neutralize older full-bleed or shifted collection page rules only here. */
.collections-page .page-hero,
.collections-page .collections-grid,
.collections-page .collection-card {
  transform: none !important;
}

/* Extra breathing room when the header collapses or becomes visually taller. */
@media(max-width: 1180px) {
  .collections-page {
    padding-top: clamp(26px, 5vw, 58px) !important;
  }

  .collections-page .collections-hero,
  .collections-page .page-hero.compact.collections-hero,
  .collections-page .collections-grid {
    width: calc(100% - 44px) !important;
  }
}

@media(max-width: 760px) {
  .collections-page {
    padding-top: 34px !important;
  }

  .collections-page .collections-hero,
  .collections-page .page-hero.compact.collections-hero,
  .collections-page .collections-grid {
    width: calc(100% - 36px) !important;
  }

  .collections-page .collections-hero .kicker,
  .collections-page .page-hero.compact.collections-hero .kicker {
    margin-bottom: 18px !important;
  }

  .collections-page .collections-hero h1,
  .collections-page .page-hero.compact.collections-hero h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
    overflow-wrap: normal !important;
  }

  .collections-page .collections-hero p,
  .collections-page .page-hero.compact.collections-hero p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .collections-page .collections-grid {
    margin-top: 26px !important;
  }
}

@media(max-width: 430px) {
  .collections-page {
    padding-top: 30px !important;
  }

  .collections-page .collections-hero,
  .collections-page .page-hero.compact.collections-hero,
  .collections-page .collections-grid {
    width: calc(100% - 30px) !important;
  }
}