/*
Theme Name: Velvet and Vice (Coppermine)
Description: The Lady-Gaga.net look for the Haus of GaGallery: velvet black, gold detailing,
             Bodoni headlines and drifting smoke. For Coppermine Photo Gallery 1.6.x.
Version: 1.0.0

Coppermine prints its albums, thumbnails and image pages as tables with fixed class names
(maintable, tableh1, tableb, thumbnails, navmenu...). Everything below restyles those, so the
theme works with every page Coppermine has, including admin screens and plugins.
*/

/* ---------- Tokens ---------- */
:root {
  --void: #0B0809;
  --void-2: #130D0F;
  --void-3: #1C1316;
  --velvet-deep: #2E0710;
  --velvet: #5A0F1C;
  --garnet: #8E1B2C;
  --gold: #C6A15B;
  --gold-soft: rgba(198, 161, 91, .55);
  --gold-line: rgba(198, 161, 91, .26);
  --bone: #EFE6D6;
  --bone-2: #D9CDBA;
  --smoke: #9A8C8C;
  --line: rgba(239, 230, 214, .09);

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --gutter: clamp(16px, 3.4vw, 40px);
  --vv-thumb: 170px;   /* how big thumbnails are shown */
  --ease: cubic-bezier(.45, 0, .55, 1);
  --t: 400ms;

  --orn-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' fill='none' stroke='%23C6A15B' stroke-width='.9'%3E%3Cpath d='M0 8h40c8 0 10-6 16-6 3 0 4 3 4 6 0-3 1-6 4-6 6 0 8 6 16 6h40'/%3E%3Cpath d='M60 3l4 5-4 5-4-5z'/%3E%3C/svg%3E");
  --orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23C6A15B' stroke-width='1'%3E%3Cpath d='M1 47V16C1 7.7 7.7 1 16 1h31'/%3E%3Cpath d='M6 47V20c0-7.7 6.3-14 14-14h27' opacity='.55'/%3E%3Cpath d='M12 32c0-10 8-18 18-18 5 0 8 3 8 7s-3 6-6 6-5-2-5-4.5'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color-scheme: dark; }
body.vv {
  margin: 0; padding: 0;
  background: var(--void);
  color: var(--bone);
  font: 300 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* candlelight that trails the cursor + velvet vignette */
body.vv::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px circle at var(--mx, 72%) var(--my, 18%), rgba(198, 161, 91, .07), transparent 65%),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(46, 7, 16, .45) 100%);
}
/* fine film grain */
body.vv::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vv-bar, .vv-hero, .vv-menus, .vv-page, .vv-footer { position: relative; z-index: 1; }

/* Coppermine's own stylesheet sets Verdana on table cells: use the theme font instead */
body.vv td, body.vv th, body.vv p, body.vv li, body.vv input, body.vv select, body.vv textarea { font-family: var(--f-body); }
.vv-logo, .vv-logo span { font-family: var(--f-display) !important; }
a, a:link, a:visited { color: var(--bone); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover, a:active, a:focus { color: var(--gold); text-decoration: none; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
img { border: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; color: var(--bone); letter-spacing: -.01em; }
h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 22px; }
p { margin: 0 0 12px; }
hr { border: 0; height: 16px; background: var(--orn-rule) center / 120px 16px no-repeat; }
::selection { background: var(--velvet); color: var(--bone); }

/* ---------- Top bar (matches www.lady-gaga.net) ---------- */
.vv-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 8, 9, .88);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--gold-line);
}
.vv-bar__inner {
  max-width: 1320px; margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.vv-logo, .vv-logo:link, .vv-logo:visited {
  display: inline-flex; align-items: baseline; flex: none; line-height: 1;
  font: 500 clamp(20px, 2.3vw, 28px)/1 var(--f-display); letter-spacing: .14em; color: var(--bone-2);
}
.vv-logo__main {
  background: linear-gradient(100deg, var(--bone-2) 0%, #fff8ea 22%, var(--gold) 40%, var(--bone-2) 60%, var(--bone-2) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vv-foil 14s var(--ease) infinite;
}
.vv-logo__tld { color: var(--gold); font-style: italic; letter-spacing: .06em; }
@keyframes vv-foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.vv-site-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); align-items: center; }
.vv-site-nav a, .vv-site-nav a:link, .vv-site-nav a:visited {
  position: relative; padding: 6px 0;
  font: 600 11px/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--bone-2);
}
.vv-site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--t) var(--ease);
}
.vv-site-nav a:hover { color: var(--gold); }
.vv-site-nav a:hover::after, .vv-site-nav a.is-current::after { transform: scaleX(1); }
.vv-site-nav a.is-current { color: var(--gold); }

/* ---------- Hero: gallery name on a velvet stage ---------- */
.vv-hero {
  overflow: hidden; isolation: isolate;
  padding: clamp(46px, 7vw, 92px) var(--gutter) clamp(34px, 5vw, 60px);
  text-align: center;
  background:
    radial-gradient(46% 70% at 50% -10%, rgba(239, 230, 214, .10), transparent 70%),
    radial-gradient(70% 60% at 50% 115%, rgba(142, 27, 44, .45), transparent 70%),
    linear-gradient(180deg, #120a0c, var(--void));
  border-bottom: 1px solid var(--gold-line);
}
.vv-smoke { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.vv-hero .vv-smoke { opacity: .8; }
.vv-hero__inner { max-width: 900px; margin: 0 auto; display: grid; justify-items: center; gap: 14px; }
.vv-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 10.5px/1 var(--f-caps); letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.vv-kicker::before, .vv-kicker::after { content: ""; width: 38px; height: 1px; background: var(--gold-soft); }
.vv-title { margin: 0; font: 400 clamp(42px, 7vw, 92px)/1 var(--f-display); letter-spacing: -.015em; }
.vv-title a, .vv-title a:link, .vv-title a:visited { color: var(--bone); }
.vv-title a:hover { color: var(--bone); }
.vv-tagline { margin: 0; max-width: 60ch; color: var(--smoke); font-size: 15px; }
.vv-tagline:empty { display: none; }
.vv-rule { display: block; width: 140px; height: 18px; background: var(--orn-rule) center / contain no-repeat; margin-top: 6px; }

/* ---------- Gallery menus ---------- */
.vv-menus { border-bottom: 1px solid var(--line); background: rgba(19, 13, 15, .6); }
.vv-menus__inner { max-width: 1320px; margin: 0 auto; padding: 18px var(--gutter); display: grid; gap: 12px; justify-items: center; }
ul.vv-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
ul.vv-menu li { margin: 0; padding: 0; }
ul.vv-menu a, ul.vv-menu a:link, ul.vv-menu a:visited {
  display: inline-block; padding: 10px 14px;
  border: 1px solid var(--gold-line);
  font: 600 10px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-2);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
ul.vv-menu a:hover { color: var(--void); background: var(--gold); border-color: var(--gold); }
ul.vv-menu--sub a, ul.vv-menu--sub a:link, ul.vv-menu--sub a:visited { border-color: transparent; color: var(--smoke); padding: 8px 10px; }
ul.vv-menu--sub a:hover { color: var(--gold); background: none; border-color: var(--gold-line); }
.vv-menu__item--login a, .vv-menu__item--login a:link, .vv-menu__item--login a:visited,
.vv-menu__item--register a, .vv-menu__item--register a:link { color: var(--gold); }

/* ---------- Page ---------- */
.vv-page { max-width: 1320px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) 64px; }
.vv-main { min-width: 0; overflow-x: auto; }
.vv-ad { margin: 0 auto 32px; text-align: center; min-height: 0; }
.vv-ad:empty { display: none; }

/* ---------- Tables (every Coppermine box) ---------- */
table.maintable {
  width: 100% !important;
  border-collapse: separate; border-spacing: 0;
  margin: 0 0 28px;
  background: linear-gradient(180deg, rgba(28, 19, 22, .92), rgba(19, 13, 15, .92));
  border: 1px solid var(--gold-line);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
table.maintable table { border-collapse: separate; border-spacing: 0; }
.tableh1 {
  padding: 14px 18px !important;
  background: rgba(74, 13, 24, .55) !important;
  border-bottom: 1px solid var(--gold-line);
  font: 600 11px/1.3 var(--f-caps) !important; letter-spacing: .24em; text-transform: uppercase; color: var(--gold) !important;
}
.tableh1 a, .tableh1 a:link, .tableh1 a:visited { color: var(--bone-2); }
.tableh1 a:hover { color: var(--gold); }
.tableh2 {
  padding: 12px 16px !important;
  background: rgba(46, 7, 16, .38) !important;
  border-bottom: 1px solid var(--line);
  font: 500 17px/1.3 var(--f-display) !important; color: var(--bone) !important;
}
.tableb, .tableb_alternate {
  padding: 12px 16px;
  background: transparent !important;
  color: var(--bone-2);
  border-top: 1px solid var(--line);
}
tr.tableb, tr.tableb_alternate { border: 0; }
td.tableb:empty, td.tableb_alternate:empty { padding: 0; border: 0; }
.tablef {
  padding: 14px 16px !important;
  background: rgba(11, 8, 9, .6) !important;
  border-top: 1px solid var(--gold-line);
  text-align: center;
}
.cpg_starttable_outer, .cpg_starttable_inner { background: none; }

/* Breadcrumb / "Home > Appearances > 2018" */
.statlink, .statlink a { font-family: var(--f-caps); }
.statlink a, .statlink a:link, .statlink a:visited { color: var(--bone-2); }
.statlink a:hover { color: var(--gold); }

/* ---------- Category list (gallery home) ---------- */
td.catrow, td.catrow_noalb {
  padding: 18px 20px !important;
  background: transparent !important;
  border-top: 1px solid var(--line);
  color: var(--bone-2);
  transition: background var(--t) var(--ease);
}
tr:hover > td.catrow, tr:hover > td.catrow_noalb { background: rgba(90, 15, 28, .18) !important; }
td.catrow[align="center"] {
  font: 600 13px/1 var(--f-caps); letter-spacing: .12em; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.catlink, .catlink a { font-family: var(--f-display); }
.catlink a, .catlink a:link, .catlink a:visited { font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--bone); }
.catlink a:hover { color: var(--gold); font-style: italic; }
td.catrow img, td.catrow_noalb img { border: 1px solid var(--gold-line); padding: 3px; background: var(--void); }

/* Category lists (the gallery home, and pages like Appearances with its years):
   two columns of cards, each with the name and its album and file counts. */
table.maintable:has(td.catrow, td.catrow_noalb) > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr {
  display: flex; align-items: center; min-width: 0;
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
  transition: background var(--t) var(--ease);
}
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr:hover { background: rgba(90, 15, 28, .2); }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr:hover > td { background: transparent !important; }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr:has(> td.tableh1) { grid-column: 1 / -1; box-shadow: none; }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr > td.tableh1 { flex: 1; }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr > td.tableh1[align="center"] { display: none; }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr:has(> td.tableb:empty) { display: none; }
table.maintable:has(td.catrow, td.catrow_noalb) > tbody > tr:has(> td.tableb:not(:empty)) { grid-column: 1 / -1; }
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow,
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow_noalb { border-top: 0; padding-top: 22px !important; padding-bottom: 22px !important; }
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow:first-child,
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow_noalb { flex: 1; min-width: 0; }
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow[align="center"] {
  flex: none; display: grid; justify-items: center; gap: 7px; padding-left: 6px !important; padding-right: 22px !important;
  font-size: 15px;
}
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow[align="center"]::after {
  font: 600 8.5px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--smoke);
}
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow[align="center"]:nth-child(2)::after { content: "Albums"; }
table.maintable:has(td.catrow, td.catrow_noalb) td.catrow[align="center"]:nth-child(3)::after { content: "Files"; }
table.maintable:has(td.catrow, td.catrow_noalb) .catlink a { font-size: 28px; }

/* ---------- Album list ---------- */
.alblink, .alblink a { font-family: var(--f-display); }
.alblink a, .alblink a:link, .alblink a:visited { font-size: 18px; color: var(--bone); }
.alblink a:hover { color: var(--gold); }
.album_stat {
  margin: 6px 0 0 !important;
  font: 600 10px/1.6 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--smoke);
}
a.albums img.image { margin: 12px 14px 12px 12px; }

/* ---------- Thumbnails ---------- */
td.thumbnails { padding: 20px 10px !important; vertical-align: top; background: transparent !important; }
/* Bigger thumbnails: shown at --vv-thumb wide. Coppermine makes 75 px thumbnails, so raise
   "Max dimension of thumbnails" in Config and rebuild them to keep them sharp (see README.txt). */
img.thumbnail { width: var(--vv-thumb) !important; max-width: 100%; height: auto !important; }
td.thumbnails > img[src*="spacer.gif"] { display: none; }
/* album lists: keep room for the bigger album thumbnail next to the album details */
td.thumbnails:has(> a.albums) { width: calc(var(--vv-thumb) + 36px); min-width: calc(var(--vv-thumb) + 36px); }
a.albums img.thumbnail { max-width: none; }
img.image, img.thumbnail, .image img {
  border: 1px solid var(--gold-line) !important;
  padding: 5px;
  background: var(--void);
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .95);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);
  filter: saturate(.9);
}
a:hover img.image, a:hover img.thumbnail, a:focus img.image {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold-soft), 0 20px 40px -18px rgba(90, 15, 28, .95);
  transform: translateY(-2px);
  filter: saturate(1.05) contrast(1.04);
}
.thumb_title, .thumb_caption, .thumb_num_comments, .thumb_filename {
  display: block; margin-top: 8px;
  font: 400 12px/1.4 var(--f-body); color: var(--smoke);
}
.thumb_title { font: 500 14px/1.3 var(--f-display); color: var(--bone-2); }
.thumb_caption_ctime, .thumb_caption_ctime a {
  font: 600 9.5px/1.4 var(--f-caps) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--smoke) !important;
}
.thumb_num_comments { color: var(--gold); }

/* ---------- Page numbers and the image navigation bar ---------- */
td.navmenu {
  padding: 8px 4px !important;
  background: transparent !important;
  font: 400 18px/1 var(--f-display); color: var(--bone-2);
  border-top: 1px solid var(--line);
}
td.navmenu a, td.navmenu a:link, td.navmenu a:visited {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px;
  color: var(--bone-2); border-bottom: 1px solid transparent;
}
td.navmenu a:hover { color: var(--gold); border-color: var(--gold-line); }
/* the current page number */
td.navmenu + td.tableb, td.tableb[align="center"][valign="middle"] {
  font: italic 400 18px/1 var(--f-display); color: var(--gold) !important; text-align: center;
}
td.navmenu img { vertical-align: middle; }
/* Page numbers wrap onto more lines instead of stretching the table off the page */
table.maintable tr:has(> td.navmenu):has(> td.tableh1) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
table.maintable tr:has(> td.navmenu):has(> td.tableh1) > td.tableh1 { flex: 0 0 100%; white-space: normal !important; text-align: center; }
table.maintable tr:has(> td.navmenu):has(> td.tableh1) > td:not([class]) { display: none; }
table.maintable tr:has(> td.navmenu):has(> td.tableh1) > td.navmenu { border-top: 0; }
a.navmenu_pic, a.navmenu_pic:link { display: inline-grid !important; place-items: center; width: 42px; height: 42px; border: 1px solid var(--gold-line) !important; border-radius: 50%; }
a.navmenu_pic:hover { border-color: var(--gold) !important; background: rgba(198, 161, 91, .08); }
a.navmenu_pic img { width: 20px; height: 20px; }
/* Coppermine's page arrows are black: tint them gold */
td.navmenu img.icon { width: 16px; height: 16px; filter: invert(1) sepia(1) saturate(2.2) hue-rotate(2deg) brightness(.82); }
/* "FILE 38/19252" */
td.navmenu[width="100%"] { font: 600 10.5px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--smoke); }
#pic_info_button a, #slideshow_button a { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--gold-line); border-radius: 50%; }

/* ---------- Image page ---------- */
td.display_media {
  padding: clamp(18px, 3vw, 40px) !important;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(90, 15, 28, .28), transparent 75%),
    #080506 !important;
}
td.display_media img.image, td.display_media .image img, td.display_media td.image {
  max-width: 100%; height: auto;
  padding: 0; border: 1px solid var(--gold-line) !important;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 0 6px rgba(11, 8, 9, .9), 0 0 0 7px var(--gold-line);
  transform: none !important;
}
td.display_media a:hover img.image { transform: none; }
.img_caption_table { width: 100%; border-collapse: collapse; }
.img_caption_table th { padding: 18px 16px 6px; font: 400 26px/1.2 var(--f-display) !important; color: var(--bone); text-align: center; }
.img_caption_table td { padding: 0 16px 18px; color: var(--bone-2); text-align: center; }
.pic_title { font: 400 26px/1.2 var(--f-display); color: var(--bone); }
.pic_caption { color: var(--bone-2); }
#picinfo td.tableb:first-child, #picinfo td.tableb_alternate:first-child {
  width: 180px; white-space: nowrap;
  font: 600 10px/1.6 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke);
}
/* rating */
#voting_title { text-align: center; }
#star_rating { text-align: center; padding: 14px !important; }
/* film strip */
.filmstrip_background { background: #080506 !important; }
.prev_strip, .next_strip { opacity: .8; }

/* ---------- Comments ---------- */
.comment_date { font: 600 9.5px/1.4 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); }
td.tableh2 a { color: var(--gold); }

/* ---------- Forms ---------- */
input.textinput, textarea.textinput, select.listbox, select.listbox_lang, input[type="text"], input[type="password"], input[type="email"], textarea {
  max-width: 100%;
  padding: 9px 11px;
  background: var(--void) !important;
  border: 1px solid var(--gold-line) !important;
  color: var(--bone) !important;
  font: 400 15px/1.4 var(--f-body);
  border-radius: 0;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input.textinput:focus, textarea.textinput:focus, select.listbox:focus, input[type="text"]:focus, textarea:focus {
  outline: 0; border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(198, 161, 91, .12);
}
input.button, button.button, a.button, input[type="submit"], input[type="button"] {
  display: inline-block; cursor: pointer;
  padding: 11px 18px;
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  font: 600 10.5px/1 var(--f-caps) !important; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 0;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
input.button:hover, button.button:hover, a.button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--gold) !important; color: var(--void) !important;
}
input.checkbox, input.radio, input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
label { color: var(--bone-2); }
div.fieldset, fieldset { border: 1px solid var(--gold-line); padding: 16px; margin: 0 0 18px; }
span.legend, legend { font: 600 10.5px var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); padding: 0 8px; }

/* ---------- Messages ---------- */
.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation, .cpg_user_message, .message {
  margin: 0 0 24px; padding: 14px 18px 14px 18px;
  background: rgba(19, 13, 15, .9) !important;
  border: 1px solid var(--gold-line) !important; border-left: 3px solid var(--gold) !important;
  color: var(--bone-2) !important;
  background-image: none !important;
}
.cpg_message_success { border-left-color: #7ba36b !important; }
.cpg_message_warning { border-left-color: #d9a441 !important; }
.cpg_message_error, .cpg_message_validation { border-left-color: var(--garnet) !important; }
.important { color: var(--gold); }

/* ---------- Admin menu (only for you) ---------- */
.admin_menu, a.admin_menu, .admin_menu a {
  display: inline-block; margin: 0 4px 6px 0; padding: 7px 10px;
  background: var(--void-2) !important;
  border: 1px solid var(--gold-line) !important;
  font: 600 9.5px/1.2 var(--f-caps) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2) !important;
  background-image: none !important;
}
a.admin_menu:hover, .admin_menu a:hover { color: var(--void) !important; background: var(--gold) !important; border-color: var(--gold) !important; }
.admin_menu_anim { background-image: none !important; }
.user_thumb_infobox, .user_thumb_infobox td, .user_thumb_infobox th { background: transparent; color: var(--bone-2); }

/* ---------- Sort order, misc ---------- */
.sortorder_cell, .sortorder_options { font: 600 9.5px/1.4 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.sortorder_cell a, .sortorder_options a { color: var(--bone-2); }
.sortorder_cell a:hover, .sortorder_options a:hover { color: var(--gold); }
.icon { vertical-align: middle; }
pre.filepath, .debug_text { background: var(--void-2); color: var(--bone-2); border: 1px solid var(--line); padding: 10px; }
.clickable_option { cursor: pointer; }
.external { padding-right: 0; background: none; }
.red { color: #d4596a; } .green { color: #8fbf7a; } .blue { color: #8fb3d9; }

/* ---------- Footer ---------- */
.vv-footer {
  margin-top: 30px; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--gold-line);
  background: linear-gradient(180deg, var(--void), #070506);
}
.vv-footer .vv-smoke { opacity: .75; }
.vv-footer__inner {
  max-width: 1320px; margin: 0 auto; padding: 56px var(--gutter) 34px;
  display: grid; grid-template-columns: 1.3fr .7fr 1.2fr; gap: 40px;
}
.vv-footer h2 { margin: 0 0 16px; font: 600 10.5px var(--f-caps); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.vv-footer p { margin: 12px 0 0; color: var(--smoke); font-size: 14px; max-width: 46ch; }
.vv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vv-footer ul a, .vv-footer ul a:link, .vv-footer ul a:visited { font: 400 18px var(--f-display); color: var(--bone-2); }
.vv-footer ul a:hover { color: var(--gold); }
.vv-footer__credits {
  max-width: 1320px; margin: 0 auto; padding: 18px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  color: var(--smoke); font-size: 12px; text-align: center;
}
.vv-footer__credits .footer, .footer {
  font: 400 12px/1.6 var(--f-body) !important; color: var(--smoke) !important; padding: 0 !important; background: none;
}
.footer a, .footer a:link, .footer a:visited { color: var(--bone-2) !important; }
.footer a:hover { color: var(--gold) !important; }
#cpgChooseLanguageWrapper, #cpgChooseThemeWrapper { display: inline-block; margin: 8px; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  .vv-bar__inner { flex-wrap: wrap; gap: 12px; }
  .vv-site-nav { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 20px; padding-bottom: 2px; }
  .vv-site-nav::-webkit-scrollbar { display: none; }
  .vv-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  /* thumbnail rows wrap two to a line instead of squeezing */
  table.maintable tr:has(> td.thumbnails) { display: flex; flex-wrap: wrap; }
  table.maintable tr:has(> td.thumbnails) > td.thumbnails { flex: 0 0 50%; width: 50% !important; }
  :root { --vv-thumb: 140px; }
  table.maintable:has(td.catrow, td.catrow_noalb) > tbody { grid-template-columns: minmax(0, 1fr); }
  table.maintable:has(td.catrow, td.catrow_noalb) .catlink a { font-size: 22px; }
  /* album list: one album per row */
  table.maintable tr:has(> td[width="50%"]) { display: flex; flex-direction: column; }
  table.maintable tr:has(> td[width="50%"]) > td { width: 100% !important; }
  .catlink a, .catlink a:link, .catlink a:visited { font-size: 20px; }
  td.catrow, td.catrow_noalb { padding: 14px 12px !important; }
  td.navmenu a { min-width: 32px; }
  .vv-title { font-size: 40px; }
}

/* Visitors who ask their device for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation: none !important; }
}