/* ========== GLOBAL ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden;scrollbar-gutter:stable both-edges}
:root{
--text-color-dark:#f3f3f3;--text-color-light:#0a0a0a;
--bg-dark:#0a0d10;--bg-light:#fff;
--hero-overlay:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.55),rgba(0,0,0,.35))}
body.light-mode{--hero-overlay:linear-gradient(to bottom,rgba(255,255,255,.75),rgba(255,255,255,.55),rgba(255,255,255,.35))}
body{
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
background:var(--bg-dark);color:var(--text-color-dark);line-height:1.6;
-webkit-font-smoothing:antialiased;padding-top:60px;
transition:background-color .4s ease,color .4s ease}
body.light-mode{background:var(--bg-light);color:var(--text-color-light)}

:root {
  --sticky-offset: 80px; /* header (60px) + a little cushion */
}

/* Make anchors + scrollIntoView stop below the fixed header */
html { scroll-padding-top: var(--sticky-offset); }

/* Elements we might scroll to */
#reading-dynamic,
#reading-dynamic h1,
.reading-item,
.reading-text h2 {
  scroll-margin-top: var(--sticky-offset);
}

/* =========================================================
   FIXED HEADER — TRANSLUCENT IN BOTH DARK & LIGHT MODES
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  background: linear-gradient(to bottom, rgba(10,13,16,0.68), rgba(10,13,16,0.25));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Light mode: translucent white glass instead of opaque white */
body.light-mode .site-header {
  background: linear-gradient(to bottom, rgba(255,255,255,0.76), rgba(255,255,255,0.25));
  color: #000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Slightly darker when scrolling (keep same ratio) */
body.scrolled .site-header {
  background: linear-gradient(to bottom, rgba(10,13,16,0.82), rgba(10,13,16,0.52));
}
body.light-mode.scrolled .site-header {
  background: linear-gradient(to bottom, rgba(255,255,255,0.82), rgba(255,255,255,0.52));
}

/* ===== LOGO BLOCK ===== */
.logo{display:flex;align-items:center;gap:.7rem}
.logo a{display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none}
.logo-icon{
height:1.5rem;width:auto;transition:opacity .3s ease;
content:url("../logo-white.png")}
body.light-mode .logo-icon{content:url("../logo-black.png")}
.logo-text{display:flex;flex-direction:column;justify-content:center;line-height:1.1}
.logo-text .name-line{display:flex;align-items:baseline;gap:.4rem}
.logo-text .main{font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase}
.logo-text .fineart{font-weight:400;font-size:.72rem;letter-spacing:.15em;opacity:.9;text-transform:uppercase}
.logo-text .tagline{font-size:.52rem;font-style:italic;letter-spacing:.08em;opacity:.7;margin-top:.1rem}
@media(max-width:480px){.logo-text .tagline{display:none}}

/* NAV */
.menu{display:flex;align-items:center}
.menu ul{display:flex;align-items:center;gap:1.2rem;list-style:none}
.menu ul li a {
  font-size: 0.85rem; /* was 0.9rem */
  color: #ddd;
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .3s ease;
}
.menu ul li a:hover,.menu ul li a.active{color:#fff}
body.light-mode .menu ul li a{color:#222}
body.light-mode .menu ul li a:hover,body.light-mode .menu ul li a.active{color:#000}

/* LIGHT/DARK TOGGLE */
.menu ul li.theme-in-menu{display:flex;align-items:center;justify-content:center;flex-direction:row-reverse;gap:.35rem;margin-right:.4rem}
.theme-toggle{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;transition:transform .2s,opacity .2s,background-color .4s,border-color .4s}
.theme-toggle:hover{transform:scale(1.1);opacity:.9}
.theme-label{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#ccc;transition:color .4s ease;user-select:none;pointer-events:none}
body.light-mode .theme-toggle{background:#fff;border-color:#000}
body.light-mode .theme-label{color:#555}

/* HAMBURGER (mobile) */
.menu-toggle{display:none;cursor:pointer;font-size:1.8rem;color:#fff;background:none;border:none;z-index:1200}
@media(max-width:768px){
.menu-toggle{display:block!important;position:fixed;top:.85rem;right:1.5rem;font-size:1.9rem;z-index:3000;transition:opacity .3s,transform .3s}
.menu-toggle:hover{opacity:.85;transform:scale(1.05)}
.menu{position:fixed;top:0;right:-250px;height:100vh;width:220px;flex-direction:column;align-items:flex-end;padding:80px 1.2rem 1rem;
background:linear-gradient(to bottom,rgba(10,13,16,.88),rgba(10,13,16,.55));
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:-4px 0 20px rgba(0,0,0,.5);border-radius:0 0 0 8px;
transition:right .4s,opacity .4s;opacity:0;z-index:2500}
.menu.active{right:0;opacity:1}
.menu ul{flex-direction:column;align-items:flex-end;width:100%;gap:.8rem}
body.light-mode .menu{background:linear-gradient(to bottom,rgba(255,255,255,.88),rgba(255,255,255,.55))}}

/* === FIX: ensure hamburger and header stay on top and clickable === */
.site-header {
  z-index: 99999 !important;
}

.menu-toggle {
  z-index: 100000 !important;
  position: fixed !important;
  top: 0.85rem;
  right: 1.5rem;
  pointer-events: auto !important;
}

.hero.hero-page.reading-hero,
.hero.hero-page.reading-hero::before {
  pointer-events: none !important;
}

/* --- Fix: prevent hero overlay from blocking gallery interaction --- */
.hero,
.hero-page {
  pointer-events: none;
}
.hero * {
  pointer-events: auto;
}

/* HERO */
.hero,.hero-page,.hero--main{position:fixed;inset:0;width:100vw;height:100vh;
background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-2;
filter:brightness(1.05);transition:filter .6s ease-in-out}
body.light-mode .hero,body.light-mode .hero-page,body.light-mode .hero--main{filter:brightness(1.1)}
.hero::before,.hero-page::before,.hero--main::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:var(--hero-overlay);transition:background .6s,opacity .6s}
body.scrolled .hero::before,body.scrolled .hero-page::before,body.scrolled .hero--main::before{opacity:.95}

/* === UNIFIED HERO FOR ALL SUBPAGES (except index) === */
body:not(.index-page) .hero,
body:not(.index-page) .hero-page,
body:not(.index-page) .hero--main {
  background-image: url("/images/hero/hero-global.webp") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.05);
  transition: filter 0.6s ease-in-out;
}

/* Light mode brightness */
body.light-mode:not(.index-page) .hero,
body.light-mode:not(.index-page) .hero-page,
body.light-mode:not(.index-page) .hero--main {
  filter: brightness(1.1);
}

/* === HERO POINTER FIX (ensures header and hamburger always clickable) === */
.hero,
.hero::before,
.hero-page,
.hero-page::before,
.hero--main,
.hero--main::before,
.hero.hero-page.reading-hero,
.hero.hero-page.reading-hero::before {
  pointer-events: none !important;
}

/* CONTENT WRAPPER — Reading & all pages (no dark overlay) */
.page-content {
  position: relative;
  z-index: 10;
  margin-top: 60px;
  background: none !important;          /* remove translucent dark field */
  backdrop-filter: none !important;     /* remove frosted blur */
  -webkit-backdrop-filter: none !important;
  animation: fadePageIn .8s ease both;
}

main {
  z-index: 10;
  margin-top: 0;
  animation: fadePageIn .8s ease both;
}

/* ===== GALLERY ===== */
.gallery-tabs{position:sticky;top:60px;z-index:9980;display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin:.4rem auto 1.5rem;padding:0}
.gallery-tabs .tab{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.35rem .9rem;border-radius:999px;cursor:pointer;font-size:.8rem;text-transform:uppercase;transition:all .25s}
.gallery-tabs .tab:hover,.gallery-tabs .tab.active{background:#fff;color:#000;border-color:#fff}
body.light-mode .gallery-tabs .tab{color:#111;border-color:rgba(0,0,0,.4)}
body.light-mode .gallery-tabs .tab:hover,body.light-mode .gallery-tabs .tab.active{background:#000;color:#fff;border-color:#000}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem;padding:1.5rem 1rem 3rem}
@media(min-width:1600px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.gallery-item{display:flex;flex-direction:column;align-items:center;text-align:center}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25); /* subtle white outline */
  opacity: 0.88;
  filter: brightness(0.95);
  transition: opacity 0.3s, filter 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.4s;
}

/* Hover state — slightly brighter outline */
.gallery-item img:hover {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1.015);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Light mode variant — soft dark outline */
body.light-mode .gallery-item img {
  border-color: rgba(0, 0, 0, 0.25);
}

body.light-mode .gallery-item img:hover {
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.gallery-item img:hover{opacity:1;filter:brightness(1);transform:scale(1.015);border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.45)}
body.light-mode .gallery-item img{border-color:#bbb}
body.light-mode .gallery-item img:hover{border-color:#000;box-shadow:0 0 10px rgba(0,0,0,.35)}
.caption{margin-top:.4rem;line-height:1.3}

.gallery-item img.thumb {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
}

/* =========================================================
   Progressive Thumbnail Loading — Echo Optimization (2025-10)
   Adds smooth per-image fade-in as thumbnails load
   ========================================================= */

.gallery-grid img.thumb {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.gallery-grid img.thumb.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* --- Gallery Item Fade-In Container Animation (2025-10-Echo) --- */
.gallery-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.gallery-item[data-visible="1"] {
  opacity: 1;
  transform: none;
}

.caption h3{font-weight:500;font-size:.8rem;color:#fff}
.caption h3 span{font-weight:400;color:#aaa;font-size:.75rem}
body.light-mode .caption h3{color:#000}
body.light-mode .caption h3 .year{color:#666}
.load-more-btn{display:block;margin:2rem auto 4rem;background:transparent;color:#fff;border:1px solid #777;padding:.6rem 1.5rem;border-radius:30px;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.load-more-btn:hover{color:#000;background:#fff;border-color:#fff}
body.light-mode .load-more-btn{color:#111;border-color:#333}
body.light-mode .load-more-btn:hover{color:#fff;background:#000;border-color:#000}

/* ===== Gallery Controls ===== */
.gallery-controls{position:sticky;top:60px;z-index:9980;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 1rem .75rem;margin:0 auto .75rem;max-width:1200px}

/* Make the whole filter + sort section sticky like the Advanced Search bar */
.gallery-filters {
  position: sticky;
  top: 60px; /* same offset as fixed header */
  z-index: 9981; /* slightly above gallery-controls */
  background: linear-gradient(to bottom, rgba(10,13,16,0.9), rgba(10,13,16,0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-bottom: 0.4rem;
  transition: background 0.3s ease;
}

/* Light-mode variant */
body.light-mode .gallery-filters {
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
}

/* Optional: subtle darker tone while scrolling */
body.scrolled .gallery-filters {
  background: linear-gradient(to bottom, rgba(10,13,16,0.88), rgba(10,13,16,0.6));
}
body.light-mode.scrolled .gallery-filters {
  background: linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(255,255,255,0.6));
}

.controls-left{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.controls-right{display:flex;align-items:center;gap:.5rem}
.chip{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.35rem .9rem;border-radius:999px;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:all .25s}
.chip:hover,.chip.is-active{background:#fff;color:#000;border-color:#fff}
body.light-mode .chip{color:#111;border-color:rgba(0,0,0,.4)}
body.light-mode .chip:hover,body.light-mode .chip.is-active{background:#000;color:#fff;border-color:#000}
.chip-dropdown{position:relative}
.chip-menu{display:none;position:absolute;top:120%;left:0;min-width:220px;background:rgba(10,13,16,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:.4rem;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:50}
.chip-menu button{display:block;width:100%;text-align:left;border-radius:8px;margin:2px 0;padding:.4rem .55rem;font-size:.85rem;text-transform:none;letter-spacing:.01em}
.chip-menu button.is-active{font-weight:600}
body.light-mode .chip-menu{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.2)}
.sort-label{font-size:.75rem;color:#bbb;letter-spacing:.04em;text-transform:uppercase}
body.light-mode .sort-label{color:#555}
.sort-select{appearance:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.35rem 2rem .35rem .8rem;font-size:.85rem;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;transition:all .25s}
.sort-select:hover{background-color:#fff;color:#000;border-color:#fff}
body.light-mode .sort-select{color:#111;border-color:rgba(0,0,0,.4)}
body.light-mode .sort-select:hover{background:#000;color:#fff;border-color:#000}
@media(max-width:768px){.gallery-controls{flex-direction:column;align-items:stretch;gap:.5rem}.controls-right{justify-content:flex-end}}

/* === ADVANCED SEARCH BAR — final tuned alignment === */
.advanced-bar {
  position: sticky !important;
  top: 52px !important;      /* header (60) + 2px overlap */
  z-index: 9981 !important;  /* below tabs (9982), above gallery content */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0.25rem 0;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  transition: background 0.3s ease;
}

/* Light-mode */
body.light-mode .advanced-bar {
  background: rgba(255,255,255,0.25);
  border-color: rgba(0,0,0,0.15);
}

#advanced-btn.chip {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  cursor: pointer;
  transition: all .25s ease;
}
#advanced-btn.chip:hover {
  background: #fff;
  color: #000;
}
body.light-mode #advanced-btn.chip {
  color: #111;
  border-color: rgba(0,0,0,0.4);
}
body.light-mode #advanced-btn.chip:hover {
  background: #000;
  color: #fff;
}

/* Fade / slide behaviour */
#advanced-controls {
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
  overflow: hidden;
}
#advanced-controls.hidden {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  pointer-events: none;
}
#advanced-controls.visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 400px;
  pointer-events: auto;
}

/* ===== ARTWORK PAGE ===== */
.artwork-container{max-width:1100px;margin:4.5rem auto 3rem;padding:0 1.5rem;display:flex;flex-direction:column;gap:2.5rem;animation:fadeIn .8s ease forwards}
.artwork-container .nav-buttons,.artwork-container .nav-buttons-fixed{top:70px;margin-top:-1.5rem}
.artwork-content{display:flex;align-items:flex-start;justify-content:center;gap:3rem;flex-wrap:wrap}
.artwork-image-wrapper{flex:1 1 45%;display:flex;justify-content:center}
.artwork-image-wrapper img{width:auto;height:auto;max-height:800px;max-width:100%;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.4);transition:transform .4s ease;object-fit:contain}
.artwork-image-wrapper img:hover{transform:scale(1.015)}
.artwork-text{flex:1 1 45%;text-align:left}
.artwork-title{font-size:1.6rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.artwork-meta,.artwork-series{color:#aaa;font-size:.95rem;margin-bottom:.3rem}
body.light-mode .artwork-title{color:#000}
body.light-mode .artwork-meta,body.light-mode .artwork-series{color:#444}
.artwork-description{font-size:.9rem;color:#f3f3f3;line-height:1.6;opacity:0;transform:translateY(6px);animation:fadeTextIn 1.2s ease forwards .3s}
body.light-mode .artwork-description{color:#111}
@keyframes fadeTextIn{to{opacity:1;transform:translateY(0)}}
.a.artwork-meta .artwork-status {
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  margin-top: 0.25em;
  margin-bottom: 1.2em;
  opacity: 0.8;
  border: none; /* remove any leftover underline */
}
.artwork-status.status-sold{color:#c62828}
.artwork-status.status-available{color:#2e7d32}
.artwork-status.status-nfs{color:#757575}
body.light-mode .artwork-status.status-sold{color:#b71c1c}
body.light-mode .artwork-status.status-available{color:#1b5e20}
body.light-mode .artwork-status.status-nfs{color:#555}

/* ===== STOLEN / UNKNOWN STATUS ===== */
.artwork-status.status-unknown {
  color: #f4b400;              /* warm Google-style amber yellow */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.95;
}
body.light-mode .artwork-status.status-unknown {
  color: #8a6d3b;              /* deeper golden tone for light background */
}

/* ===== ARTWORK IMAGE ZOOM (Lightbox) ===== */
#artwork-image {
  cursor: zoom-in;
  transition: opacity .3s ease;
}

#lightbox-overlay {
  backdrop-filter: blur(4px);
}

body.light-mode #lightbox-overlay {
  background: rgba(255, 255, 255, 0.95);
}

/* ===== ARTWORK PAGE DESCRIPTION REFINEMENT (FINAL) ===== */
.artwork-description {
  display: block;
  font-size: 0.9rem;       /* smaller text */
  line-height: 1.55;       /* comfortable spacing */
  color: var(--text-color-dark);
  opacity: 0;
  transform: translateY(6px);
  animation: fadeTextIn 1.2s ease forwards .3s;
  margin-top: 0.6rem;      /* half-line extra spacing below meta */
}

body.light-mode .artwork-description {
  color: var(--text-color-light);
}

/* ===== ARTWORK PAGE – Font size refinement ===== */
body.artwork-page .artwork-container {
  font-size: 0.9rem;       /* base size for all text */
  line-height: 1.55;       /* comfortable vertical rhythm */
}

body.artwork-page .artwork-title {
  font-size: 1.3rem;       /* smaller title than default */
  line-height: 1.25;
}

body.artwork-page .artwork-meta,
body.artwork-page .artwork-series,
body.artwork-page .artwork-description {
  font-size: 0.8rem;       /* uniform smaller text for meta + series + description */
  line-height: 1.55;
}

body.artwork-page .nav-buttons button,
body.artwork-page .nav-buttons a {
  font-size: 0.85rem;      /* smaller navigation labels */
}

/* ===== SERIES INTRO LINK ===== */
body.artwork-page .related-link {
  font-size: 0.75rem;      /* subtle secondary text size */
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.25s ease;
}

body.artwork-page .related-link:hover {
  opacity: 1;
}

/* ===== SERIES INTRO LINK (on artwork page) ===== */
.related-link {
  font-size: 0.75rem;        /* smaller, subtler size */
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.25s ease;
}

.related-link:hover {
  opacity: 1;
  border-bottom: 1px solid currentColor;
}

/* ===== ABOUT PAGE TYPOGRAPHY — SMALLER, AIRIER, QUIETER ===== */
.about-page {
  max-width: 860px;
  margin: 5rem auto 4rem;
  padding: 0 1.5rem;
  line-height: 1.7;
  font-size: 0.85rem;
  color: var(--text-color-dark);
}

body.light-mode .about-page {
  color: var(--text-color-light);
}

/* Headings (Artist Statement, Thresholds and Time, etc.) */
.about-page h1,
.about-page h2,
.about-page h3 {
  font-size: 1rem;               /* smaller headline size */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 3rem;              /* generous space before each heading */
  margin-bottom: 0.9rem;         /* slightly tighter below heading */
  line-height: 1.35;
  color: var(--text-color-dark);
}

body.light-mode .about-page h1,
body.light-mode .about-page h2,
body.light-mode .about-page h3 {
  color: var(--text-color-light);
}

/* Extra half-line between heading and first paragraph */
.about-page h1 + p,
.about-page h2 + p,
.about-page h3 + p {
  margin-top: 0.9rem;            /* half-line of extra breathing space */
}

/* Paragraphs */
.about-page p {
  font-size: 0.8rem;             /* smaller body text */
  line-height: 1.75;
  margin-bottom: 0.9rem;
  opacity: 0.95;
}

/* Emphasis styles */
.about-page strong { font-weight: 600; }
.about-page em { font-style: italic; }

/* First heading tweak */
.about-page h1:first-of-type {
  margin-top: 0;
}

/* ===== CONTACT PAGE TYPOGRAPHY — MATCHING ABOUT PAGE ===== */
.contact-page {
  max-width: 700px;
  margin: 6rem auto 5rem;
  padding: 0 1.5rem;
  text-align: center;
  line-height: 1.75;
  font-size: 0.8rem;
  color: var(--text-color-dark);
}

body.light-mode .contact-page {
  color: var(--text-color-light);
}

/* Headings */
.contact-page h1,
.contact-page h2,
.contact-page h3 {
  font-size: 0.95rem;          /* slightly smaller for balance */
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.contact-page h1:first-of-type {
  margin-top: 0;
}

/* Paragraphs */
.contact-page p {
  font-size: 0.8rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  opacity: 0.95;
}

/* Buttons & links */
.contact-btn {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.6rem;
  border-radius: 999px;
}

/* ===== READING PAGE TYPOGRAPHY — MATCH ABOUT PAGE ===== */
.reading-page {
  max-width: 860px;
  margin: 5rem auto 4rem;
  padding: 0 1.5rem;
  line-height: 1.7;
  font-size: 0.85rem;
  color: var(--text-color-dark);
}

body.light-mode .reading-page {
  color: var(--text-color-light);
}

/* Headings */
.reading-page h1,
.reading-page h2,
.reading-page h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  line-height: 1.35;
  color: var(--text-color-dark);
}

body.light-mode .reading-page h1,
body.light-mode .reading-page h2,
body.light-mode .reading-page h3 {
  color: var(--text-color-light);
}

/* Paragraphs */
.reading-page p {
  font-size: 0.8rem;
  line-height: 1.75;
  margin-bottom: 0.9rem;
  opacity: 0.95;
}

/* === FIX: Keep Reading titles visible when expanding === */
.reading-item {
  scroll-margin-top: 80px; /* matches fixed header height (60px + margin) */
}

/* Optional: Quotes, italic text */
.reading-page blockquote {
  font-style: italic;
  opacity: 0.9;
  margin: 1.5rem 2rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,255,0.2);
}
body.light-mode .reading-page blockquote {
  border-left-color: rgba(0,0,0,0.3);
}

/* Optional: links */
.reading-page aL {
  color: #ccc;
  text-decoration: underline;
  transition: color 0.3s ease;
}
body.light-mode .reading-page a { color: #333; }
.reading-page a:hover {
  color: #fff;
}
body.light-mode .reading-page a:hover {
  color: #000;
}

/* ===== READING PAGE: Dynamic Single-Text View ===== */
#reading-dynamic {
  display: none;
  animation: fadePageIn 0.8s ease both;
  color: var(--text-color-dark);
  line-height: 1.7;
  font-size: 0.85rem;
}

body.light-mode #reading-dynamic {
  color: var(--text-color-light);
}

#reading-dynamic h1 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-bottom: 1rem;
  color: var(--text-color-dark);
}

body.light-mode #reading-dynamic h1 {
  color: var(--text-color-light);
}

#reading-dynamic p {
  font-size: 0.8rem;
  line-height: 1.75;
  margin-bottom: 0.9rem;
  opacity: 0.95;
}

#reading-dynamic a.read-btn {
  display: inline-block;
  margin-top: 1.5rem;
}

/* ===== READING PAGE – CARD LAYOUT (FINAL, CLEAN VERSION) ===== */
.reading-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 4rem;
}

.reading-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

.reading-thumb {
  flex: 0 0 260px;
  max-width: 260px;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(0,0,0,.4);
  opacity: 0.9;
  transition: transform .3s ease, opacity .3s ease;
}
.reading-thumb:hover {
  transform: scale(1.02);
  opacity: 1;
}

.reading-text {
  flex: 1;
  min-width: 260px;
}

.reading-text h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .6rem;
  letter-spacing: 0.02em;
}

.reading-text p {
  font-size: 0.8rem;
  line-height: 1.75;
  opacity: 0.95;
  margin-bottom: 0.8rem;
}

/* --- Read More Button --- */
.read-btn {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;            /* underline removed */
  transition: all .25s ease;
}
.read-btn:hover {
  background: #fff;
  color: #000;
}
body.light-mode .read-btn {
  color: #111;
  border-color: rgba(0,0,0,0.4);
}
body.light-mode .read-btn:hover {
  background: #000;
  color: #fff;
}
/* Ensure "Read more" buttons never get underlined by global link styles */
.read-btn,
.reading-page .read-btn {
  text-decoration: none !important;
}
/* ===== GLOBAL BUTTON STANDARD (Unified Hover Behaviour) ===== */
button,
a.contact-btn,
a.read-btn,
.load-more-btn,
.nav-buttons a,
.nav-buttons button {
  transition: all 0.25s ease;
  text-decoration: none;
}

button:hover,
a.contact-btn:hover,
a.read-btn:hover,
.load-more-btn:hover,
.nav-buttons a:hover,
.nav-buttons button:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

/* Light mode adjustments */
body.light-mode button:hover,
body.light-mode a.contact-btn:hover,
body.light-mode a.read-btn:hover,
body.light-mode .load-more-btn:hover,
body.light-mode .nav-buttons a:hover,
body.light-mode .nav-buttons button:hover {
  background: rgba(0,0,0,0.1);
  color: #000;
  border-color: rgba(0,0,0,0.6);
}

/* ===== PATCH: UNIFIED SOFT HOVER (NON-DESTRUCTIVE) ===== */

/* Dark mode hover – soft light glow */
button:hover,
a.contact-btn:hover,
a.read-btn:hover,
.load-more-btn:hover,
.nav-buttons a:hover,
.nav-buttons button:hover,
.gallery-tabs .tab:hover,
.chip:hover,
.sort-select:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}

/* Light mode hover – subtle dark tint */
body.light-mode button:hover,
body.light-mode a.contact-btn:hover,
body.light-mode a.read-btn:hover,
body.light-mode .load-more-btn:hover,
body.light-mode .nav-buttons a:hover,
body.light-mode .nav-buttons button:hover,
body.light-mode .gallery-tabs .tab:hover,
body.light-mode .chip:hover,
body.light-mode .sort-select:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.55) !important;
  color: #000 !important;
}

/* ===== RELATED LINKS (CO↔GR / Dual Versions) ===== */
.artwork-related {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.9;
}

.artwork-related p {
  margin: 0.3rem 0;
}

.artwork-related a.related-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.4);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.artwork-related a.related-link:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

body.light-mode .artwork-related {
  border-top-color: rgba(0,0,0,0.2);
  color: var(--text-color-light);
}

body.light-mode .artwork-related a.related-link {
  color: #000;
  border-bottom-color: rgba(0,0,0,0.4);
}

body.light-mode .artwork-related a.related-link:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ===== DUAL METADATA LAYOUT ===== */
#artwork-meta p {
  margin: 0.2rem 0;
}

#artwork-meta p + p.artwork-edition {
  margin-bottom: 0.8rem;
}

#artwork-meta p:nth-of-type(3n) {
  margin-top: 0.6rem; /* small gap before next version set */
}

#artwork-meta::after {
  content: "";
  display: block;
  width: 60%;
  height: 1px;
  background: rgba(255,255,255,0.25);
  margin: 0.8rem 0;
  opacity: 0.4;
}

body.light-mode #artwork-meta::after {
  background: rgba(0,0,0,0.25);
}

/* ===== Artwork Dual Version – Layout Polish ===== */
#artwork-meta {
  margin-bottom: 1.2rem; /* space before description */
}

#artwork-description {
  margin-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 0.9rem;
}

body.light-mode #artwork-description {
  border-top-color: rgba(0,0,0,0.2);
}

/* ===== Remove unwanted line under AVAILABLE ===== */
.artwork-meta p,
.artwork-meta .artwork-status,
.artwork-status {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Unknown / stolen */
.artwork-status.status-unknown { color: #f4b400; }            /* dark mode amber */
body.light-mode .artwork-status.status-unknown { color: #8a6d3b; } /* lighter amber in light mode */

/* Optional cleanup for any pseudo-element leftovers */
.artwork-meta::after,
.artwork-meta::before,
.artwork-status::after,
.artwork-status::before {
  content: none !important;
  border: none !important;
}

.related-link {
  color: #fff;
  text-decoration: underline;
  opacity: 0.85;
  transition: opacity .3s ease;
}
.related-link:hover {
  opacity: 1;
}
body.light-mode .related-link {
  color: #000;
}

/* FOOTER */
.site-footer{width:100%;text-align:center;padding:2rem 0 1.5rem;background:none;z-index:5}
.site-footer .copyright{font-size:.65rem;color:#999;letter-spacing:.05em;margin:0}
body.light-mode .site-footer .copyright{color:#444}

/* CONTACT PAGE */
.contact-page{text-align:center;padding:4rem 1rem 6rem}
.contact-intro{color:#aaa;margin-bottom:2rem}
.contact-links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ANIMATIONS */
.fade-in{animation:fadeIn .5s ease forwards}
.fade-out{animation:fadeOut .8s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeHero{from{opacity:0}to{opacity:1}}
@keyframes fadePageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.index-page .hero::before{display:none!important}

/* NAV BUTTONS */
.nav-buttons,.nav-buttons-fixed{display:flex;justify-content:center;align-items:center;gap:.7rem;margin:.8rem auto 1.5rem;position:sticky;top:80px;z-index:9990}
@media(max-width:768px){.nav-buttons,.nav-buttons-fixed{top:70px;margin:.6rem auto 1.2rem}}
.nav-buttons a,.nav-buttons button,.nav-buttons-fixed a,.nav-buttons-fixed button{
background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;padding:.35rem .9rem;border-radius:999px;cursor:pointer;text-decoration:none;line-height:1.2;transition:all .25s}
.nav-buttons a:hover,.nav-buttons button:hover,.nav-buttons-fixed a:hover,.nav-buttons-fixed button:hover{background:#fff;color:#000;border-color:#fff}
body.light-mode .nav-buttons a,body.light-mode .nav-buttons button,body.light-mode .nav-buttons-fixed a,body.light-mode .nav-buttons-fixed button{color:#111;border-color:rgba(0,0,0,.4)}
body.light-mode .nav-buttons a:hover,body.light-mode .nav-buttons button:hover,body.light-mode .nav-buttons-fixed a:hover,body.light-mode .nav-buttons-fixed button:hover{background:#000;color:#fff;border-color:#000}


/* === UNIFIED BACK TO ARTWORK BUTTON STYLE (matches site standard) === */
.back-btn,
.nav-buttons a,
.nav-buttons button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .35rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: all .25s ease;
}

/* Hover (shared soft glow) */
.back-btn:hover,
.nav-buttons a:hover,
.nav-buttons button:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}

/* Light mode */
body.light-mode .back-btn,
body.light-mode .nav-buttons a,
body.light-mode .nav-buttons button {
  color: #111;
  border-color: rgba(0,0,0,.4);
}

body.light-mode .back-btn:hover,
body.light-mode .nav-buttons a:hover,
body.light-mode .nav-buttons button:hover {
  background-color: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.55);
  color: #000;
}

/* Centered alignment on Reading page */
.reading-page .back-btn {
  display: block;
  margin: 1.2rem auto 1.4rem;
  text-align: center;
}

/* ===== Artwork Status Styles ===== */
.artwork-status {
  font-weight: 600;
  margin-top: 0.25rem;
}

.status-sold {
  color: #d9534f; /* deep red */
}

.status-available {
  color: #4caf50; /* green */
}

.status-nfs {
  color: #777; /* neutral grey */
}


/* === GALLERY PAGE STICKY FIX (Final Minimal Version) === */

body.gallery-page .gallery-tabs {
  position: sticky;
  top: 60px; /* sits just below the 60px fixed header */
  z-index: 9982;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body.gallery-page .gallery-filters {
  position: sticky;
  top: 105px; /* header (60px) + tabs (~48px) */
  z-index: 9981;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px; /* closes tiny gap */
}

body.light-mode.gallery-page .gallery-tabs,
body.light-mode.gallery-page .gallery-filters {
  background: rgba(255,255,255,0.25);
  border-color: rgba(0,0,0,0.15);
}

/* === FINAL VERIFIED FIX FOR STICKY GALLERY TABS & FILTERS === */

/* 1. Ensure parent containers don't block sticky */
html, body, main, .page-content {
  overflow: visible !important;
  height: auto !important;
}

/* 2. Make sure main content doesn't have transform or relative that cancels sticky */
main, .page-content {
  position: static !important;
}

/* 3. Gallery tabs sticky under header */
body.gallery-page .gallery-tabs {
  position: sticky !important;
  top: 60px !important; /* just below the fixed 60px header */
  z-index: 9982;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  transition: background 0.3s ease;
}

/* 4. Filter bar sticky directly below tabs */
body.gallery-page .gallery-filters {
  position: sticky !important;
  top: 91px !important;
margin-top: -3px !important;
  z-index: 9981;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px;
}
/* Force filter bar alignment override */
body.gallery-page .gallery-filters {
  top: 91px !important;
  margin-top: -3px !important;
}

/* 5. Light mode versions */
body.light-mode.gallery-page .gallery-tabs,
body.light-mode.gallery-page .gallery-filters {
  background: rgba(255,255,255,0.25);
  border-color: rgba(0,0,0,0.15);
}

/* ===== READING: Smooth visuals ===== */

/* site-wide smooth scroll (respects reduced motion via JS fallback) */
html { scroll-behavior: smooth; }

/* fade/slide in cards */
.reading-item {
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
  transition: opacity .5s ease, transform .5s ease;
}
.reading-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === FIX: Ensure Reading titles remain visible when expanding === */
.reading-item {
  scroll-margin-top: 80px !important; /* header (60px) + cushion */
}

/* swap between list and dynamic view */
#reading-list,
#reading-dynamic {
  transition: opacity .35s ease, transform .35s ease;
}
.reading-swap-hide {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
}
.reading-swap-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* tiny emphasis on the Back button */
#reading-dynamic .back-btn {
  opacity: .9;
  transition: opacity .25s ease, transform .25s ease;
}
#reading-dynamic .back-btn:hover {
  opacity: 1;
  transform: translateX(-2px);
}

/* gentle parallax mask on reading hero */
.hero.hero-page.reading-hero::before {
  mix-blend-mode: normal;
  opacity: .9;
}

/* accessibility: if user prefers less motion, keep it calm */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reading-item,
  #reading-list,
  #reading-dynamic {
    transition: none !important;
  }
}

/* === FIX: Reading hero light-mode overlay === */
body.light-mode .hero.hero-page.reading-hero::before {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.35)
  ) !important;
  opacity: 0.9 !important; /* match dark-mode density */
  mix-blend-mode: normal;
}

/* === FIX: Reading hero dimension + behaviour match === */
.hero.hero-page.reading-hero {
  position: fixed;
  inset: 0;
  width: 100vw;       /* match all other hero blocks */
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  filter: brightness(1.05);      /* same subtle lift as global hero */
  transition: filter 0.6s ease-in-out;
}

body.light-mode .hero.hero-page.reading-hero {
  filter: brightness(1.1);
}

/* =========================================================
   FORCE CONSISTENT HERO DIMENSIONS — ALL PAGES INCLUDING READING
   ========================================================= */
.hero,
.hero-page,
.hero--main,
.hero.hero-page.reading-hero {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: -2 !important;
  filter: brightness(1.05) !important;
  transition: filter 0.6s ease-in-out !important;
}

/* Light-mode brightness bump */
body.light-mode .hero,
body.light-mode .hero-page,
body.light-mode .hero--main,
body.light-mode .hero.hero-page.reading-hero {
  filter: brightness(1.1) !important;
}

/* === Light-mode overlay correction for Reading hero === */
body.light-mode .hero.hero-page.reading-hero::before {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.35)
  ) !important;
  opacity: 0.9 !important;
  mix-blend-mode: normal !important;
}

/* === SIMPLE & FINAL SAFARI black text in light mode === */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
  color: #000 !important;
}
/* ===== FIXED COPYRIGHT OVERLAY (ALL PAGES) ===== */
.site-footer {
  position: fixed;
  bottom: 10px;              /* a bit above the bottom edge */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  text-align: center;
  font-size: 0.65rem;        /* tiny text */
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.6);
  background: rgba(10,13,16,0.3); /* subtle translucent backdrop */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  z-index: 9999;             /* always on top */
  pointer-events: none;      /* prevents blocking clicks */
}
body.light-mode .site-footer {
  color: rgba(0,0,0,0.6);
  background: rgba(255,255,255,0.4);
}

/* === READING PAGE CINEMATIC SECTION FADE-IN === */
.page-content section {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-content section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === FINAL LAYER PRIORITY FIX — ensures header and menu above all === */
.site-header,
.menu,
.menu-toggle {
  z-index: 999999 !important;
  pointer-events: auto !important;
}


body.contact-page main.page-content {
  position: relative;
  z-index: 10;
  height: calc(100vh - 60px);      /* fill visible area minus header */
  display: flex;
  flex-direction: column;
  justify-content: center;         /* true vertical centering */
  align-items: center;
  text-align: center;
  padding: 0 2rem;                 /* remove vertical padding */
  box-sizing: border-box;
}

body.light-mode.contact-page main.page-content {
  color: var(--text-color-light);
}

body.contact-page .contact-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  margin-top: 2rem;
}

body.contact-page .contact-btn {
  display: inline-block;
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: currentColor;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  background: transparent;
  text-decoration: none;
  transition: all 0.25s ease;
}

body.contact-page .contact-btn:hover {
  background: currentColor;
  color: var(--bg-dark);
}

body.light-mode.contact-page .contact-btn:hover {
  color: var(--bg-light);
}
body.gallery-page .gallery-filters {
  position: sticky !important;
  top: 88px !important; /* was 92px — raises bar by 4 px */
  z-index: 9981;
  display: none; /* hidden until toggled */
  justify-content: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: rgba(10,13,16,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body.gallery-page .gallery-filters[style*="display: block"] {
  display: flex !important;
  justify-content: center;
  opacity: 1;
  transform: translateY(0);
}

body.gallery-page .gallery-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* ===== CONTACT BUTTONS — MATCH READING PAGE READ-BTN STYLE (FINAL 2025-11-03) ===== */
body.contact-page .contact-btn {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
  font-weight: 500;
}

body.contact-page .contact-btn:hover {
  background: #fff;
  color: #000;
}

body.light-mode.contact-page .contact-btn {
  color: #111;
  border-color: rgba(0,0,0,0.4);
}

body.light-mode.contact-page .contact-btn:hover {
  background: #000;
  color: #fff;
}

/* Responsive refinement */
@media (max-width: 640px) {
  body.contact-page .contact-btn {
    font-size: 0.7rem;
    padding: 0.35rem 1rem;
  }
}

/* === CONTACT PAGE — Logo tagline alignment fix === */
body.contact-page .logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* force left alignment of all text lines */
}

body.contact-page .logo-text .tagline {
  text-align: left;          /* prevents center or right offset */
  width: 100%;               /* keep same column width as main text */
}

/* =========================================================
   v45 — MOBILE BUTTON SCALING (Gallery + Artwork pages)
   Reduces button height and font size for cleaner layout
   ========================================================= */
@media (max-width: 768px) {

  /* ---- General Button Scaling ---- */
  .chip,
  .gallery-tabs .tab,
  .load-more-btn,
  .nav-buttons a,
  .nav-buttons button,
  .back-btn,
  .sort-select,
  #advanced-btn.chip {
    font-size: 0.7rem !important;      /* smaller text */
    padding: 0.35rem 1.0rem !important;/* tighter height */
    border-radius: 999px !important;
  }

  /* ---- Advanced Search and Filter Controls ---- */
  .gallery-controls,
  .gallery-filters {
    gap: 0.4rem !important;            /* denser layout */
  }

  /* ---- Artwork Navigation ---- */
  .nav-buttons,
  .nav-buttons-fixed {
    gap: 0.45rem !important;
  }

  /* ---- Dropdown / Sort consistency ---- */
  .sort-select {
    padding: 0.3rem 1.6rem 0.3rem 0.8rem !important;
  }

  /* ---- Load more button centered and smaller ---- */
  .load-more-btn {
    padding: 0.4rem 1.2rem !important;
  }
}

/* HERO (stable version — before hero unification tweaks) */
.hero,
.hero-page,
.hero--main {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  filter: brightness(1.05);
  transition: filter .6s ease-in-out;
}
body.light-mode .hero,
body.light-mode .hero-page,
body.light-mode .hero--main {
  filter: brightness(1.1);
}

.hero::before,
.hero-page::before,
.hero--main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--hero-overlay);
  transition: background .6s, opacity .6s;
}
body.scrolled .hero::before,
body.scrolled .hero-page::before,
body.scrolled .hero--main::before {
  opacity: .95;
}

/* UNIFIED HERO (stable) */
body:not(.index-page) .hero,
body:not(.index-page) .hero-page,
body:not(.index-page) .hero--main {
  background-image: url("/images/hero/hero-global.webp") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.05);
  transition: filter 0.6s ease-in-out;
}
body.light-mode:not(.index-page) .hero,
body.light-mode:not(.index-page) .hero-page,
body.light-mode:not(.index-page) .hero--main {
  filter: brightness(1.1);
}

body.reading-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: -3;
}
body.light-mode.reading-page::before {
  background: var(--bg-light);
}

/* === INDEX PAGE — Welcome Note (Floating Overlay) === */
.welcome-note {
  position: absolute;
  top: 8vh;                /* raise higher or lower as you wish */
  left: auto;
  right: 2vw;                 /* push slightly inward from the right edge */
  max-width: 550px;
  text-align: right;
  line-height: 1.6;
  font-size: 0.85rem;
  color: var(--text-color-dark);
  background: rgba(10, 13, 16, 0.25);       /* subtle translucent panel */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 0.9rem 1.3rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
  z-index: 15;                  /* ensures it sits above hero */
}

body.light-mode .welcome-note {
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-color-light);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.welcome-note p {
  margin: 0;
  font-style: italic;
  letter-spacing: 0.015em;
}

.hero,
.hero-page {
  pointer-events: none;
}

/* === FINAL FIX — ARTWORK PAGE COLOUR VISIBILITY (CLEAN VERSION) === */
body.artwork-page .artwork-status.status-sold      { color: #c0392b !important; }
body.artwork-page .artwork-status.status-available { color: #27ae60 !important; }
body.artwork-page .artwork-status.status-nfs       { color: #f1c40f !important; }
body.artwork-page .artwork-status.status-unknown   { color: #95a5a6 !important; }

body.artwork-page .artwork-series a,
body.artwork-page .related-link,
body.artwork-page .series-link {
  color: #9ecdf2 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

body.artwork-page .artwork-series a:hover,
body.artwork-page .related-link:hover,
body.artwork-page .series-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* === FINAL VERIFIED FIX — ARTWORK PAGE STATUS & SERIES COLOURS === */
body.artwork-page .artwork-status {
  display: block !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

body.artwork-page .artwork-status.status-sold      { color: #c0392b !important; }  /* red */
body.artwork-page .artwork-status.status-available { color: #27ae60 !important; }  /* green */
body.artwork-page .artwork-status.status-nfs       { color: #f1c40f !important; }  /* yellow */
body.artwork-page .artwork-status.status-unknown   { color: #95a5a6 !important; }  /* grey */

body.artwork-page .artwork-series,
body.artwork-page .related-link,
body.artwork-page .series-link,
body.artwork-page .artwork-series a {
  color: #9ecdf2 !important;                       /* soft blue */
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

body.artwork-page .artwork-series:hover a,
body.artwork-page .related-link:hover,
body.artwork-page .series-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* === HARD OVERRIDE — ENSURES ARTWORK COLOURS ALWAYS SHOW === */
body.artwork-page .artwork-status.status-sold      { color: #c0392b !important; }
body.artwork-page .artwork-status.status-available { color: #27ae60 !important; }
body.artwork-page .artwork-status.status-nfs       { color: #f1c40f !important; }
body.artwork-page .artwork-status.status-unknown   { color: #95a5a6 !important; }

body.artwork-page .series-link,
body.artwork-page .related-link,
body.artwork-page .artwork-series a {
  color: #9ecdf2 !important;
  text-decoration: none !important;
}

body.artwork-page .series-link:hover,
body.artwork-page .related-link:hover,
body.artwork-page .artwork-series a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* === FINAL FORCE FIX — Artwork Status Colours Always Visible === */
body.artwork-page .artwork-meta .artwork-status.status-sold      { color: #c0392b !important; }
body.artwork-page .artwork-meta .artwork-status.status-available { color: #27ae60 !important; }
body.artwork-page .artwork-meta .artwork-status.status-nfs       { color: #f1c40f !important; }
body.artwork-page .artwork-meta .artwork-status.status-unknown   { color: #95a5a6 !important; }

/* === HARD FINAL FIX — Force Grey for "WHEREABOUTS UNKNOWN" === */
body.artwork-page .artwork-status.status-unknown {
  color: #95a5a6 !important;   /* medium grey */
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  opacity: 0.95;
}
body.light-mode.artwork-page .artwork-status.status-unknown {
  color: #555 !important;      /* darker grey for light background */
}

/* === FINAL FIX — STATUS COLOUR CORRECTION (v45) === */

/* SOLD → red */
body.artwork-page .artwork-status.status-sold {
  color: #c0392b !important;
}

/* AVAILABLE → green */
body.artwork-page .artwork-status.status-available {
  color: #27ae60 !important;
}

/* COLLECTION OF THE ARTIST (NFS) → neutral grey */
body.artwork-page .artwork-status.status-nfs {
  color: #95a5a6 !important;       /* medium grey */
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* WHEREABOUTS UNKNOWN (STOLEN) → warm amber yellow */
body.artwork-page .artwork-status.status-stolen {
  color: #f4b400 !important;       /* golden amber */
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Light-mode tweak */
body.light-mode.artwork-page .artwork-status.status-nfs {
  color: #666 !important;          /* darker grey */
}
body.light-mode.artwork-page .artwork-status.status-stolen {
  color: #8a6d3b !important;       /* deeper gold-brown */
}

/* === ABSOLUTE FINAL FIX — LOCKED STATUS COLOURS === */
body.artwork-page .artwork-status.status-sold {
  color: #c0392b !important; /* deep red */
}

body.artwork-page .artwork-status.status-available {
  color: #27ae60 !important; /* green */
}

/* COLLECTION OF THE ARTIST → grey */
body.artwork-page .artwork-status.status-nfs,
body.artwork-page .artwork-meta .artwork-status.status-nfs {
  color: #95a5a6 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
}

/* WHEREABOUTS UNKNOWN → amber yellow */
body.artwork-page .artwork-status.status-stolen,
body.artwork-page .artwork-meta .artwork-status.status-stolen {
  color: #f4b400 !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
}

/* Light mode tweaks */
body.light-mode.artwork-page .artwork-status.status-nfs,
body.light-mode.artwork-page .artwork-meta .artwork-status.status-nfs {
  color: #666 !important;
}

body.light-mode.artwork-page .artwork-status.status-stolen,
body.light-mode.artwork-page .artwork-meta .artwork-status.status-stolen {
  color: #8a6d3b !important;
}

/* === FINAL OVERRIDE — ARTWORK STATUS COLOURS (UNBEATABLE) === */
body.artwork-page .artwork-status.status-sold {
  color: #c0392b !important; /* red */
}

body.artwork-page .artwork-status.status-available {
  color: #27ae60 !important; /* green */
}

body.artwork-page .artwork-status.status-nfs {
  color: #95a5a6 !important; /* grey */
}

body.artwork-page .artwork-status.status-stolen {
  color: #f4b400 !important; /* amber */
}

body.light-mode.artwork-page .artwork-status.status-nfs {
  color: #666 !important; /* darker grey */
}

body.light-mode.artwork-page .artwork-status.status-stolen {
  color: #8a6d3b !important; /* golden brown */
}

/* === HARD OVERRIDE — LOCK STATUS COLOURS === */
body.artwork-page p.artwork-status.status-nfs {
  color: #95a5a6 !important;       /* grey */
  filter: none !important;
  text-shadow: none !important;
}

body.artwork-page p.artwork-status.status-stolen {
  color: #f4b400 !important;       /* amber */
  filter: none !important;
  text-shadow: none !important;
}

/* Light-mode variants */
body.light-mode.artwork-page p.artwork-status.status-nfs {
  color: #666 !important;
}

body.light-mode.artwork-page p.artwork-status.status-stolen {
  color: #8a6d3b !important;
}

/* =========================================================
   CINEMATIC SERIES SECTIONS — READING PAGE (v45)
   ========================================================= */
.reading-series {
  margin: 4rem auto;
  max-width: 860px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: block;
}

.reading-series.is-visible {
  opacity: 1;
  transform: none;
}

/* HERO BANNER INSIDE EACH SERIES SECTION */
.series-hero {
  height: 40vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.series-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  border-radius: 10px;
  z-index: 0;
}

.series-hero h1,
.series-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.series-hero h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.series-hero .series-period {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* SERIES BODY TEXT */
.series-text {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.75;
  opacity: 0.95;
}

/* VIEW ARTWORKS BUTTON */
.reading-series .read-btn {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.45rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.reading-series .read-btn:hover {
  background: #fff;
  color: #000;
}

body.light-mode .reading-series .read-btn {
  color: #111;
  border-color: rgba(0,0,0,0.4);
}

body.light-mode .reading-series .read-btn:hover {
  background: #000;
  color: #fff;
}

/* RESPONSIVE TUNING */
@media (max-width: 768px) {
  .series-hero {
    height: 35vh;
    padding: 1.5rem;
  }
  .series-hero h1 {
    font-size: 1.2rem;
  }
  .series-hero .series-period {
    font-size: 0.75rem;
  }
  .series-text {
    font-size: 0.8rem;
  }
}

/* === CINEMATIC ANIMATION ENHANCEMENTS === */
.reading-series {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.reading-series.is-visible {
  opacity: 1;
  transform: none;
}

.series-hero.animate h1,
.series-hero.animate .series-period {
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* subtle parallax smoothing */
.series-hero {
  transition: transform 0.3s ease-out;
  will-change: transform;
}
body.reading-page .page-content {
  position: static !important;
  overflow: visible !important;
}

/* === FIX: Prevent generic section fade from overriding cinematic reading sections === */
.page-content section.reading-series {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.page-content section.reading-series.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   CINEMATIC READING SERIES — Echo v45 (Final)
   ========================================================= */

/* Each series section fades up when entering view */
.reading-series {
  margin: 4rem auto;
  max-width: 860px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

/* When visible */
.reading-series.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero banner within each series */
.series-hero {
  height: 40vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.series-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  border-radius: 10px;
  z-index: 0;
}

.series-hero h1,
.series-hero .series-period {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Animate titles after section appears */
.series-hero.animate h1,
.series-hero.animate .series-period {
  opacity: 1;
  transform: none;
}

/* Series text below hero */
.series-text {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.75;
  opacity: 0.95;
}

/* Button */
.reading-series .read-btn {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.45rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.reading-series .read-btn:hover {
  background: #fff;
  color: #000;
}

body.light-mode .reading-series .read-btn {
  color: #111;
  border-color: rgba(0,0,0,0.4);
}
body.light-mode .reading-series .read-btn:hover {
  background: #000;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .series-hero { height: 35vh; padding: 1.5rem; }
  .series-hero h1 { font-size: 1.2rem; }
  .series-hero .series-period { font-size: 0.75rem; }
  .series-text { font-size: 0.8rem; }
}

/* =========================================================
   HARD FIX — READING CINEMATIC ANIMATION PRIORITY (v45-Echo)
   ========================================================= */
.reading-series {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition: opacity 1s ease-out, transform 1s ease-out !important;
  will-change: opacity, transform;
}

.reading-series.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* animate text inside hero when section enters view */
.series-hero h1,
.series-hero .series-period {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition: opacity 0.9s ease, transform 0.9s ease !important;
}

.series-hero.animate h1,
.series-hero.animate .series-period {
  opacity: 1 !important;
  transform: none !important;
}

/* parallax smoothing */
.series-hero {
  transition: transform 0.35s ease-out !important;
  will-change: transform;
}

/* === Reading: subtle cinematic fade + parallax (Echo 2025-11) === */
.reading-series {
  margin: 4rem auto;
  max-width: 860px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
  scroll-margin-top: var(--sticky-offset, 80px);
}

.reading-series.is-visible {
  opacity: 1;
  transform: none;
}

.series-hero {
  height: 40vh;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: transform .3s ease-out;  /* needed for the parallax */
  will-change: transform;
}

.series-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.3));
  border-radius: 10px;
}

.series-hero h1,
.series-hero .series-period { position: relative; z-index: 1; margin: 0; }

.series-hero.animate h1,
.series-hero.animate .series-period {
  animation: readingFadeUp 0.9s ease-out forwards;
}

@keyframes readingFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.series-text { margin-top: 1.2rem; opacity: .95; font-size: .85rem; line-height: 1.75; }

.reading-series .read-btn {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  padding: .45rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all .25s ease;
}
body.light-mode .reading-series .read-btn { color:#111; border-color: rgba(0,0,0,.4); }

/* === SERIES PAGE — Independent fixed hero (safe version) === */
body.series-page .series-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* fixed background only */
  z-index: 0;
  overflow: hidden;
}

/* Overlay for readability */
body.series-page .series-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

/* Keep page content above the hero background */
body.series-page .series-overlay {
  position: relative;
  z-index: 2;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* === UNIFIED TRANSPARENT HEADER FOR HERO PAGES === */
body.series-page .site-header,
body.reading-page .site-header,
body.gallery-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  transition: background-color 0.3s ease;
}

/* Slightly darken the header on scroll */
body.series-page.scrolled .site-header,
body.reading-page.scrolled .site-header,
body.gallery-page.scrolled .site-header {
  background: rgba(10, 13, 16, 0.55);
}

/* === Hero positioning fix (consistent spacing) === */
.series-banner,
.reading-hero,
.hero-page {
  margin-top: -60px; /* offset header height */
  padding-top: 60px;
  position: relative;
  z-index: 0;
}

.series-banner::before,
.reading-hero::before,
.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.25));
  z-index: 0;
}
/* =========================================================
   LIGHTBOX DARK/LIGHT MODE FIX — Echo v46 (Final)
   ========================================================= */

/* Light mode overlay background */
body.light-mode .artwork-lightbox {
  background: rgba(255, 255, 255, 0.96);
}

/* Light mode buttons */
body.light-mode .lightbox-controls button {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
  color: #0a0a0a;
}
body.light-mode .lightbox-controls button:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Light mode caption */
body.light-mode .lightbox-caption {
  color: rgba(0, 0, 0, 0.8);
}

/* Light mode spinner */
body.light-mode .lightbox-spinner {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top: 3px solid #000;
}

/* Dark mode (clarity + defaults) */
body:not(.light-mode) .lightbox-caption {
  color: rgba(255, 255, 255, 0.8);
}
body:not(.light-mode) .lightbox-spinner {
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid #fff;
}

/* Optional polish: fade out spinner once loaded */
.artwork-lightbox img.loaded + .lightbox-spinner {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* =========================================================
   HERO GLASS OVERLAY — Echo minimal addition (v46)
   ========================================================= */

/* Make sure hero containers are still behind content */
.hero,
.hero-page {
  z-index: -2;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Add a translucent frosted glass layer */
.hero::after,
.hero-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(2px) brightness(0.6);
  -webkit-backdrop-filter: blur(2px) brightness(0.6);
  z-index: 1;
  pointer-events: none;
}



/* Ensure content stays above the hero and glass */
.page-content,
.artwork-container,
.about-page,
.gallery-tabs,
.gallery-filters {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HERO CLEAN VIEW ON INDEX PAGE (no blur, no tint)
   ========================================================= */

body.index-page .hero::after,
body.index-page .hero-page::after {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* =========================================================
   READING PAGE — USE GLOBAL HERO (v46 unified)
   ========================================================= */

body.reading-page .hero,
body.reading-page .hero-page,
body.reading-page .hero--main,
body.reading-page .hero.hero-page.reading-hero {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-image: url("/images/hero/hero-global.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: -2 !important;
  filter: brightness(1.05) !important;
  transition: filter 0.6s ease-in-out !important;
}

/* Light mode variant */
body.light-mode.reading-page .hero,
body.light-mode.reading-page .hero-page,
body.light-mode.reading-page .hero--main,
body.light-mode.reading-page .hero.hero-page.reading-hero {
  filter: brightness(1.1) !important;
}

/* Overlay gradient for text readability */
body.reading-page .hero::before,
body.reading-page .hero-page::before,
body.reading-page .hero--main::before,
body.reading-page .hero.hero-page.reading-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.25));
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   SERIES HERO IMAGE OUTLINE — Reading Page (Echo v46)
   ========================================================= */

/* Default (dark mode): thin white border with soft glow */
body.reading-page .series-hero {
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  overflow: hidden;
}

/* Light mode: subtle dark edge instead */
body.light-mode.reading-page .series-hero {
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   READING SERIES — Unified Card Style (Echo v46 clean)
   ========================================================= */

.reading-series .series-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  padding: 2rem;
  min-height: 45vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  box-sizing: border-box;
}

.reading-series .series-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15));
  z-index: 0;
}

.reading-series .series-hero > * {
  position: relative;
  z-index: 1;
}

.reading-series .series-hero h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.reading-series .series-hero .series-period {
  font-size: 0.85rem;
  color: #bbb;               /* same soft grey used site-wide */
  opacity: 1;                /* keep full contrast for readability */
  margin-bottom: 0.8rem;
}

/* Light mode version */
body.light-mode .reading-series .series-hero .series-period {
  color: #666;               /* matching grey tone for light background */
}

.reading-series .series-hero .series-text {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 1rem;
}

.reading-series .series-hero .read-btn {
  align-self: flex-end;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  background: transparent;
  padding: 0.4rem 1.2rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.reading-series .series-hero .read-btn:hover {
  background: #fff;
  color: #000;
}

/* Light mode */
body.light-mode .reading-series .series-hero {
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  color: #000;
}
body.light-mode .reading-series .series-hero::before {
  background: linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,0.25));
}
body.light-mode .reading-series .series-hero .read-btn {
  border-color: rgba(0,0,0,0.45);
  color: #000;
}
body.light-mode .reading-series .series-hero .read-btn:hover {
  background: #000;
  color: #fff;
}