/* =============================================
   GGDOVE PORTFOLIO — VHS / Dreamlike Style
   Aesthetic baked into design — images unfiltered
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Saint';
  src: url('../fonts/saint.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #04040c;
  --bg-2:         #0a0a1c;
  --bg-3:         #111128;
  --text:         #c2d2ee;
  --text-dim:     #4a5a7a;
  --text-bright:  #eaf2ff;
  --accent:       #7755ee;
  --accent-dim:   rgba(119, 85, 238, 0.28);
  --accent-glow:  rgba(119, 85, 238, 0.55);
  --red-ghost:    rgba(255, 8, 38, 0.72);
  --blue-ghost:   rgba(0, 65, 255, 0.55);
  --border:       rgba(70, 90, 180, 0.15);
  --mono: 'Space Mono', 'Courier New', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --saint: 'Saint', 'Cormorant Garamond', Georgia, serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.75;
  min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Selection ── */
::selection { background: var(--accent-dim); color: var(--text-bright); }

/* =============================================
   KEYFRAME ANIMATIONS — VHS Glitch & Drift
   ============================================= */

/* Continuous red/cyan chromatic drift for large headings */
@keyframes vhsHeadingGlitch {
  0%   { text-shadow: -2px 0 var(--red-ghost), 2px 0 var(--blue-ghost), 0 0 28px var(--accent-glow); }
  8%   { text-shadow: -4px 0 rgba(255,0,30,0.80), 3px 1px rgba(0,50,255,0.45), 0 0 16px var(--accent-glow); }
  16%  { text-shadow: -1px 1px var(--red-ghost), 1px -1px rgba(0,90,255,0.60), 0 0 40px var(--accent-glow); }
  24%  { text-shadow: -3px 0 rgba(255,0,20,0.75), 2px 0 var(--blue-ghost), 0 0 22px var(--accent-glow); }
  32%  { text-shadow: -2px -1px var(--red-ghost), 2px 1px rgba(0,80,255,0.55), 0 0 35px var(--accent-glow); }
  40%  { text-shadow: -5px 0 rgba(255,0,15,0.65), 3px 0 rgba(0,55,255,0.50), 0 0 20px var(--accent-glow); }
  50%  { text-shadow: -2px 0 var(--red-ghost), 2px 0 var(--blue-ghost), 0 0 44px var(--accent-glow); }
  58%  { text-shadow: -3px 1px rgba(255,0,30,0.75), 2px -1px rgba(0,60,255,0.50), 0 0 24px var(--accent-glow); }
  66%  { text-shadow: -1px 0 rgba(255,20,50,0.80), 1px 0 rgba(0,80,255,0.60), 0 0 36px var(--accent-glow); }
  74%  { text-shadow: -4px 0 rgba(255,5,35,0.70), 3px 0 rgba(0,50,255,0.45), 0 0 18px var(--accent-glow); }
  82%  { text-shadow: -2px 1px var(--red-ghost), 2px -1px rgba(0,70,255,0.52), 0 0 30px var(--accent-glow); }
  90%  { text-shadow: -3px 0 rgba(255,0,25,0.75), 2px 0 var(--blue-ghost), 0 0 38px var(--accent-glow); }
  100% { text-shadow: -2px 0 var(--red-ghost), 2px 0 var(--blue-ghost), 0 0 28px var(--accent-glow); }
}

/* Dynamic VHS glitch — colors & intensity driven by CSS custom properties set from JS
   --glitch-red, --glitch-blue, --glitch-glow, --glitch-intensity (multiplier) */
@keyframes vhsGlitchDynamic {
  0%   { text-shadow: calc(-2px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 2px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(28px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  8%   { text-shadow: calc(-4px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 3px * var(--glitch-intensity,1)) 1px var(--glitch-blue, #003cff),
                       0 0 calc(16px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  16%  { text-shadow: calc(-1px * var(--glitch-intensity,1)) 1px var(--glitch-red, #ff001e),
                       calc( 1px * var(--glitch-intensity,1)) -1px var(--glitch-blue, #003cff),
                       0 0 calc(40px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  24%  { text-shadow: calc(-3px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 2px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(22px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  40%  { text-shadow: calc(-5px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 3px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(20px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  50%  { text-shadow: calc(-2px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 2px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(44px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  66%  { text-shadow: calc(-1px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 1px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(36px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  82%  { text-shadow: calc(-2px * var(--glitch-intensity,1)) 1px var(--glitch-red, #ff001e),
                       calc( 2px * var(--glitch-intensity,1)) -1px var(--glitch-blue, #003cff),
                       0 0 calc(30px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
  100% { text-shadow: calc(-2px * var(--glitch-intensity,1)) 0 var(--glitch-red, #ff001e),
                       calc( 2px * var(--glitch-intensity,1)) 0 var(--glitch-blue, #003cff),
                       0 0 calc(28px * var(--glitch-intensity,1)) var(--glitch-glow, #c8c0e8); }
}

/* Occasional glitch burst for nav logo */
@keyframes vhsLogoGlitch {
  0%, 87%, 100% { text-shadow: 0 0 22px var(--accent-glow); }
  88%  { text-shadow: -4px 0 var(--red-ghost), 3px 0 var(--blue-ghost), 0 0 12px var(--accent-glow); opacity: 0.85; }
  89.5%{ text-shadow: 2px 0 var(--red-ghost), -2px 0 var(--blue-ghost), 0 0 18px var(--accent-glow); opacity: 1; }
  91%  { text-shadow: -3px 0 var(--red-ghost), 2px 0 var(--blue-ghost), 0 0 10px var(--accent-glow); opacity: 0.92; }
  93%  { text-shadow: 0 0 22px var(--accent-glow); opacity: 1; }
  96%  { text-shadow: -2px 0 rgba(255,0,30,0.5), 1px 0 rgba(0,60,255,0.4), 0 0 22px var(--accent-glow); }
}

/* Page title glitch (infrequent) */
@keyframes vhsTitleGlitch {
  0%, 91%, 100% { text-shadow: 0 0 20px var(--accent-glow); opacity: 1; }
  92%  { text-shadow: -3px 0 var(--red-ghost), 2px 0 var(--blue-ghost), 0 0 8px var(--accent-glow); opacity: 0.88; }
  93.5%{ text-shadow: 0 0 20px var(--accent-glow); opacity: 1; }
  95%  { text-shadow: -2px 0 rgba(255,0,30,0.5), 1px 0 rgba(0,60,255,0.4), 0 0 20px var(--accent-glow); opacity: 0.95; }
  97%  { text-shadow: 0 0 20px var(--accent-glow); opacity: 1; }
}

/* Subtle pulse glow for accent elements */
@keyframes vhsGlowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* =============================================
   LAYOUT
   ============================================= */

.page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  min-height: 100vh;
  position: relative;
}

/* Vertical glow lines flanking content */
.page-wrapper::before,
.page-wrapper::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
  pointer-events: none;
  opacity: 0.5;
}
.page-wrapper::before { left: calc(50% - 552px); }
.page-wrapper::after  { right: calc(50% - 552px); }

/* =============================================
   NAVIGATION
   ============================================= */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.2rem 0 1.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3.5rem;
}

.nav-logo {
  font-family: var(--saint);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: var(--text-bright);
  text-transform: uppercase;
  animation: vhsLogoGlitch 7s infinite;
  transition: text-shadow 0.3s;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--mono);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.70rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.22s, text-shadow 0.22s;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  right: 100%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transition: right 0.28s ease;
}

.nav-links a:hover {
  color: var(--nav-hover-color, var(--text-bright));
  text-shadow: 0 0 14px var(--nav-hover-glow, var(--accent-glow));
}

.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }

.nav-links a.active { color: var(--nav-hover-color, var(--text-bright)); }

/* =============================================
   PAGE TITLE
   ============================================= */

.page-title {
  font-family: var(--saint);
  font-size: 0.78rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  animation: vhsTitleGlitch 9s infinite;
  position: relative;
  /* 崩文字符文溢出時保持在後續內容之下 */
  z-index: 0;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 52px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: vhsGlowPulse 2.8s ease-in-out infinite;
}

/* ── 崩文字雙層結構：正常文字在上，崩文字在下 ── */
.zalgo-normal {
  position: relative;
  z-index: 1;
}
.zalgo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0.55;
}

/* ── 崩文字溢出防擋 ──────────────────────────────
   page-title 的 zalgo 符文向下溢出時，後續內容容器的
   z-index:1 + background 會將溢出部分蓋住，實現「符文在文字之下」效果 */
.gallery-grid,
.load-more-wrap,
.bio-layout,
.exhibition-list,
.contact-layout,
.subpage-body,
.custom-page-body,
.weapons-grid {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

/* =============================================
   IMAGE RULES — NO FILTER EVER
   ============================================= */

/* All uploaded artwork / photos: original colors strictly preserved */
.gallery-item img,
.weapon-card img,
.bio-photo,
.contact-img,
.exhibition-item img,
.lightbox-img {
  display: block;
  /* Absolutely NO filter, NO hue-rotate, NO saturate — true color always */
}

/* =============================================
   GALLERY (PROJECTS)
   ============================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
  margin-bottom: 3rem;
}

/* ── Grid size variants ── */
.gallery-grid.size-small  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.gallery-grid.size-medium { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gallery-grid.size-large  { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 2.4rem; }

/* ── Layout: Masonry 瀑布流 ── */
.gallery-grid.layout-masonry {
  display: block;
  column-gap: 1.5rem;
}
.gallery-grid.layout-masonry.size-small  { column-count: 5; column-gap: 0.8rem; }
.gallery-grid.layout-masonry.size-medium { column-count: 3; }
.gallery-grid.layout-masonry.size-large  { column-count: 2; column-gap: 2rem; }
.gallery-grid.layout-masonry .gallery-item {
  break-inside: avoid;
  display: block;
  margin-bottom: 1.5rem;
}
.gallery-grid.layout-masonry .gallery-item img {
  aspect-ratio: unset;
  height: auto;
}

/* ── Layout: Slideshow 幻燈片 ── */
.gallery-grid.layout-slideshow {
  display: block;
  position: relative;
}
.slideshow-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.slideshow-slide {
  cursor: pointer;
  position: relative;
  background: var(--bg-2);
}
.slideshow-slide img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  background: var(--bg-3);
}
.slideshow-caption {
  padding: 1rem 1.2rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.slideshow-caption h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-bright);
  letter-spacing: 0.04em;
}
.slideshow-caption p {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.07em;
}
.slideshow-counter {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--accent-dim);
  letter-spacing: 0.12em;
}
.slideshow-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-top: 1.4rem;
}
.ss-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1.8rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.ss-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px rgba(100,80,255,0.18);
}
.ss-dots {
  display: flex;
  gap: 0.5rem;
}
.ss-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}
.ss-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}
@media (max-width: 600px) {
  .gallery-grid.layout-masonry.size-small  { column-count: 3; }
  .gallery-grid.layout-masonry.size-medium { column-count: 2; }
  .gallery-grid.layout-masonry.size-large  { column-count: 1; }
}

.gallery-item {
  cursor: pointer;
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  transition: transform 0.4s ease;
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0; z-index: 2;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.gallery-item:hover { transform: translateY(-3px); }

.gallery-item:hover::before {
  border-color: var(--accent-dim);
  box-shadow: inset 0 0 30px rgba(80,60,200,0.06), 0 6px 32px rgba(80,60,200,0.16);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s ease;
  background: var(--bg-3);
}

/* ── Auto aspect: detect landscape / portrait per image ── */
.gallery-grid.aspect-auto .gallery-item img {
  aspect-ratio: 4/3;
}
.gallery-grid.aspect-auto .gallery-item.portrait img {
  aspect-ratio: 3/4;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-caption {
  padding: 0.8rem 0.7rem 0.7rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.gallery-caption h3 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
  color: var(--text-bright);
}

.gallery-caption p {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ── Caption: overlay (reveal on hover) ── */
.gallery-grid.caption-overlay .gallery-item { position: relative; }
.gallery-grid.caption-overlay .gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(4,4,12,0.92));
  border-top: none;
  opacity: 0;
  transition: opacity 0.30s ease;
}
.gallery-grid.caption-overlay .gallery-item:hover .gallery-caption { opacity: 1; }

/* ── Caption: hidden ── */
.gallery-grid.caption-hidden .gallery-caption { display: none; }

/* ── Image aspect ratio variants ── */
.gallery-grid.aspect-4-3  .gallery-item img { aspect-ratio: 4/3; }
.gallery-grid.aspect-1-1  .gallery-item img { aspect-ratio: 1/1; }
.gallery-grid.aspect-16-9 .gallery-item img { aspect-ratio: 16/9; }
.gallery-grid.aspect-3-4  .gallery-item img { aspect-ratio: 3/4; }
.gallery-grid.aspect-free .gallery-item img { aspect-ratio: unset; height: auto; }

/* ── Gallery gap variants ── */
.gallery-grid.gap-tight  { gap: 0.5rem; }
.gallery-grid.gap-normal { gap: 1.8rem; }
.gallery-grid.gap-wide   { gap: 3rem; }

/* ── Hover effect: brighten ── */
.gallery-grid.hover-brighten .gallery-item:hover               { transform: none; }
.gallery-grid.hover-brighten .gallery-item:hover img           { transform: none; filter: brightness(1.18) saturate(1.05); }
.gallery-grid.hover-brighten .gallery-item:hover::before       { border-color: transparent; box-shadow: none; }

/* ── Hover effect: glow ── */
.gallery-grid.hover-glow .gallery-item:hover                   { transform: none; }
.gallery-grid.hover-glow .gallery-item:hover img               { transform: none; }
.gallery-grid.hover-glow .gallery-item:hover::before {
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 32px rgba(80,60,200,0.12);
}

/* ── Hover effect: none ── */
.gallery-grid.hover-none .gallery-item:hover                   { transform: none; }
.gallery-grid.hover-none .gallery-item:hover img               { transform: none; }
.gallery-grid.hover-none .gallery-item:hover::before           { border-color: transparent; box-shadow: none; }

/* ── Scroll animation base ──
   使用 CSS 自訂屬性分離「位移進場」與「使用者設定的 translate(x,y)」，
   避免 applyTextStyles 的 transform 被 animation 覆蓋。
   --anim-tx/ty = 入場偏移（動畫用），預設 0，
   --user-tx/ty = 使用者設定的 XY 位移（由 applyTextStyles 設定）。
   兩者合併在 transform，互不干擾。
── */
.anim-ready {
  --anim-tx: 0px; --anim-ty: 0px; --anim-scale: 1;
  opacity: 0;
  transform: translate(var(--anim-tx), var(--anim-ty)) scale(var(--anim-scale));
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-ready.anim-fade-up    { --anim-ty: 28px;  }
.anim-ready.anim-fade-in    { /* opacity only */ }
.anim-ready.anim-zoom-in    { --anim-scale: 0.87; }
.anim-ready.anim-slide-left { --anim-tx: 40px;  }
.anim-ready.anim-slide-right{ --anim-tx: -40px; }

.anim-ready.anim-visible {
  opacity: 1;
  --anim-tx: 0px; --anim-ty: 0px; --anim-scale: 1;
}

/* ── Animation speed variants ── */
.anim-speed-slow.anim-ready  { transition-duration: 0.8s; }
.anim-speed-normal.anim-ready{ transition-duration: 0.5s; }
.anim-speed-fast.anim-ready  { transition-duration: 0.3s; }

/* ── Load More ── */
.load-more-wrap { text-align: center; margin: 2.5rem 0; }

.btn-load-more {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.85rem 3.2rem;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-load-more:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  box-shadow: 0 0 22px rgba(100,80,255,0.12), inset 0 0 22px rgba(100,80,255,0.04);
}

/* =============================================
   LIGHTBOX
   ============================================= */

.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(2,2,10,0.97);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.lightbox.open { display: flex; }

.lightbox-inner {
  position: relative;
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-height: 80vh;
  max-width: 100%;
  object-fit: contain;
  /* NO filter — artwork in true color */
  box-shadow: 0 0 80px rgba(60,40,180,0.20), 0 0 0 1px var(--border);
}

.lightbox-info {
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  margin-top: 1.2rem;
  text-align: center;
  line-height: 1.9;
}

.lightbox-close {
  position: fixed; top: 1.5rem; right: 2rem;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 1.6rem;
  cursor: pointer;
  background: none; border: none;
  line-height: 1;
  transition: color 0.2s, text-shadow 0.2s;
}

.lightbox-close:hover {
  color: var(--text-bright);
  text-shadow: 0 0 14px var(--accent-glow);
}

.lightbox-prev, .lightbox-next {
  position: fixed; top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 2rem;
  cursor: pointer;
  background: none; border: none;
  transition: color 0.2s, text-shadow 0.2s;
  padding: 1rem;
  font-family: var(--mono);
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
  color: var(--text-bright);
  text-shadow: 0 0 14px var(--accent-glow);
}

/* =============================================
   EXHIBITION
   ============================================= */

.exhibition-list { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

.exh-section {
  margin-bottom: 4rem;
}
.exh-section:last-of-type { margin-bottom: 2rem; }

.exh-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  color: var(--text-bright, #e8e8f0);
  margin: 0 0 0.5rem;
  letter-spacing: 2px;
}
.exh-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--text-bright, #e8e8f0);
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
}
.exh-meta {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text-dim, #787890);
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
.exh-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-body, #b0b0c8);
  margin-bottom: 2rem;
  max-width: 720px;
}
.exh-desc p { margin: 0 0 1rem; }

.exh-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
  margin-bottom: 2rem;
}
.exh-gallery img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  filter: grayscale(0.1);
  transition: filter 0.3s;
  cursor: pointer;
}
.exh-gallery img:hover { filter: grayscale(0); }

.exh-video {
  margin-bottom: 2rem;
}
.exh-video video,
.exh-video iframe {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  border: 1px solid rgba(184,184,208,0.12);
  border-radius: 2px;
  background: #000;
}

.exh-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.exh-links a {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text-bright, #e8e8f0);
  text-decoration: none;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(184,184,208,0.25);
  border-radius: 2px;
  transition: border-color 0.3s, color 0.3s;
  letter-spacing: 1px;
}
.exh-links a:hover {
  border-color: var(--nav-hover-color, #fff);
  color: var(--nav-hover-color, #fff);
}

.exh-divider {
  border: none;
  border-top: 1px solid rgba(184,184,208,0.1);
  margin: 3rem auto;
  max-width: 200px;
}

@media (max-width: 600px) {
  .exh-title { font-size: 1.6rem; }
  .exh-gallery { grid-template-columns: 1fr; }
}

/* =============================================
   BIO
   ============================================= */

.bio-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.bio-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--bg-3);
  /* NO filter — personal photo original color */
  box-shadow: 0 0 50px rgba(50,30,150,0.14);
}

.bio-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bio-cv-list h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--text-bright, #e8e8f0);
  margin: 0 0 1rem;
  letter-spacing: 1px;
}
.bio-cv-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bio-cv-list li {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--text, #b0b0c8);
  line-height: 1.9;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(184,184,208,0.06);
}
.bio-cv-list .cv-year {
  color: var(--accent, #b8b8d0);
  font-weight: bold;
  margin-right: 0.5rem;
}

.bio-content h1 {
  font-family: var(--saint);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  color: var(--text-bright);
  /* animation now applied dynamically via JS glitch settings */
}

.bio-content .bio-subtitle {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 2.2rem;
  animation: vhsGlowPulse 3s ease-in-out infinite;
}

.bio-text {
  font-family: var(--serif);
  font-size: 0.97rem;
  color: var(--text);
  line-height: 2.1;
  margin-bottom: 1.5rem;
}

.bio-cv-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 3px;
  margin-top: 1rem;
  transition: border-color 0.2s, text-shadow 0.2s;
}

.bio-cv-link:hover {
  border-color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

/* =============================================
   CONTACT
   ============================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--bg-3);
  /* NO filter */
}

.contact-info h2 {
  font-family: var(--saint);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-bottom: 2.2rem;
  color: var(--text-bright);
  animation: vhsHeadingGlitch 5.5s infinite 1.5s;
}

.contact-item { margin-bottom: 1.8rem; }

.contact-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--accent);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.contact-value {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
}

.contact-value a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.contact-value a:hover {
  color: var(--text-bright);
  border-color: var(--accent-dim);
}

/* =============================================
   WEAPONS
   ============================================= */

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.5rem;
}

.weapon-card {
  cursor: pointer;
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  transition: transform 0.4s ease;
}

.weapon-card::before {
  content: '';
  position: absolute;
  inset: 0; z-index: 2;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.weapon-card:hover { transform: translateY(-3px); }

.weapon-card:hover::before {
  border-color: var(--accent-dim);
  box-shadow: inset 0 0 25px rgba(80,60,200,0.06), 0 6px 25px rgba(80,60,200,0.14);
}

.weapon-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  background: var(--bg-3);
  /* NO filter */
}

.weapon-card:hover img { transform: scale(1.04); }

.weapon-name {
  padding: 0.65rem 0.65rem 0.2rem;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-bright);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

.weapon-price {
  padding: 0 0.65rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  background: var(--bg-2);
}

/* =============================================
   HOME PAGE (index.html)
   ============================================= */

body.home-page {
  background: #03030b;
  overflow: hidden;
}

#home-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8rem 3.5rem;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#home-nav.visible { opacity: 1; }

#home-nav .nav-logo {
  font-family: var(--saint);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: rgba(220, 230, 255, 0.95);
  text-transform: uppercase;
  animation: vhsLogoGlitch 7s infinite;
}

#home-nav .nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

#home-nav .nav-links a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(140,155,200,0.55);
  transition: color 0.25s, text-shadow 0.25s;
}

#home-nav .nav-links a:hover {
  color: rgba(220,230,255,0.95);
  text-shadow: 0 0 14px rgba(150,120,255,0.65);
}

#canvas-container {
  position: fixed; inset: 0; z-index: 0;
}

/* =============================================
   FOOTER
   ============================================= */

footer {
  text-align: center;
  padding: 2rem 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  border-top: 1px solid var(--border);
  margin-top: 5rem;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .page-wrapper { padding: 0 1.2rem 3rem; }
  .page-wrapper::before, .page-wrapper::after { display: none; }
  nav { flex-direction: column; gap: 1.2rem; align-items: flex-start; }
  .bio-layout, .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .exh-section { margin-bottom: 3rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .weapons-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  #home-nav { padding: 1.2rem 1.5rem; }
  #home-nav .nav-links { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .weapons-grid { grid-template-columns: 1fr; }
  nav { align-items: center; }
  .nav-links { gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
}

/* =============================================
   EXHIBITION DETAIL & SUB-PAGES
   ============================================= */

/* "More →" link on the main exhibition list */
.exhibition-more-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}
.exhibition-more-link:hover {
  color: #fff;
  border-color: #fff;
  text-shadow: 0 0 10px rgba(160, 130, 255, 0.7);
}

/* Back link */
.back-link {
  display: inline-block;
  margin: 1.5rem 0 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.back-link:hover { color: var(--text); }

/* Detail page wrapper */
.exhibition-detail-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Cover: image + info side by side */
.detail-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3.5rem;
}
.detail-cover-img {
  width: 100%;
  border-radius: 2px;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.detail-cover-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.detail-title {
  font-family: var(--saint);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
.detail-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.detail-desc {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.detail-error {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.85rem;
  margin: 4rem auto;
  text-align: center;
}

/* Sub-page tabs */
.subpage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.subpage-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.subpage-tab:hover { color: var(--text); }
.subpage-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Sub-page panels */
.subpage-panels { margin-bottom: 4rem; }
.subpage-panel { display: none; }
.subpage-panel.active { display: block; }

/* Sub-page body (markdown output) */
.subpage-body {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 680px;
  margin-bottom: 2rem;
}
.subpage-body h1,
.subpage-body h2,
.subpage-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  margin: 2rem 0 0.8rem;
}
.subpage-body h1 { font-size: 1.5rem; }
.subpage-body h2 { font-size: 1.2rem; }
.subpage-body h3 { font-size: 1rem; }
.subpage-body strong { color: var(--text); }
.subpage-body a { color: var(--accent); text-decoration: underline; }
.subpage-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.subpage-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* Sub-page images grid */
.subpage-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.subpage-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.subpage-figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 2px;
}
.subpage-figure figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* =============================================
   CUSTOM PAGES
   ============================================= */

.custom-page-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding-top: 1rem;
}
.custom-page-body {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}
.custom-page-body h1,
.custom-page-body h2,
.custom-page-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  margin: 2rem 0 0.8rem;
}
.custom-page-body h1 { font-size: 1.5rem; }
.custom-page-body h2 { font-size: 1.2rem; }
.custom-page-body h3 { font-size: 1rem; }
.custom-page-body strong { color: var(--text); }
.custom-page-body a { color: var(--accent); text-decoration: underline; }
.custom-page-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.custom-page-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}
.custom-page-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* =============================================
   RESPONSIVE — detail + custom pages
   ============================================= */

@media (max-width: 768px) {
  .detail-cover {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .subpage-images,
  .custom-page-images {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .subpage-images,
  .custom-page-images {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   EXHIBITION — Slideshow
   ============================================= */
.exhibition-cover-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  min-height: 200px;
}
.exhibition-cover-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ex-slideshow {
  position: relative;
  overflow: hidden;
  background: #04020a;
  user-select: none;
}
.ex-slideshow-track {
  width: 100%;
  height: 100%;
  position: relative;
}
.ex-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ex-slide.active {
  opacity: 1;
  position: relative;
}
.ex-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ex-slide iframe,
.ex-slide video {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  background: #000;
}
.ex-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #eee8ff;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, opacity 0.2s;
  opacity: 0;
}
.ex-slideshow:hover .ex-slide-btn { opacity: 1; }
.ex-slide-btn:hover { background: rgba(120,85,255,0.5); }
.ex-slide-prev { left: 0.5rem; }
.ex-slide-next { right: 0.5rem; }
.ex-slide-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  z-index: 10;
}
.ex-slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.ex-slide-dot.active { background: var(--accent); }
.ex-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.3rem 0.7rem;
  background: rgba(6,3,15,0.72);
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  min-height: 1.4rem;
  z-index: 9;
}
.detail-cover-media {
  min-height: 240px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}
.detail-cover-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Video embeds in subpage grids ── */
.subpage-figure.media-video,
.media-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--border);
}
.media-video iframe,
.media-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.media-video figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  background: rgba(0,0,0,0.65);
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}

/* =============================================
   FRAME SETTINGS — Per-page size & color
   ============================================= */

/* Works: X-Large size */
.gallery-grid.size-xlarge  { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 2.8rem; }
.gallery-grid.layout-masonry.size-xlarge { column-count: 1; column-gap: 2.4rem; }

/* Works frame color override */
.gallery-item,
.gallery-caption,
.slideshow-slide,
.slideshow-caption { background-color: var(--frame-works, var(--bg-2)); }
.gallery-item img,
.slideshow-slide img { background-color: var(--frame-works, var(--bg-3)); }

/* Weapons size variants */
.weapons-grid.wsize-small  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.weapons-grid.wsize-medium { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.weapons-grid.wsize-large  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2.4rem; }
.weapons-grid.wsize-xlarge { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 2.8rem; }

/* Weapons frame color override */
.weapon-card,
.weapon-name,
.weapon-price { background-color: var(--frame-weapons, var(--bg-2)); }
.weapon-card img { background-color: var(--frame-weapons, var(--bg-3)); }
/* Weapons text color override */
.weapon-name { color: var(--weapon-name-color, var(--text-bright)); }
.weapon-price { color: var(--weapon-price-color, var(--text-dim)); }

/* Exhibition frame color override */
.exhibition-cover-wrap,
.detail-cover-media { background-color: var(--frame-exhibition, var(--bg-2)); }
.ex-slideshow { background-color: var(--frame-exhibition, #04020a); }
.exhibition-cover-wrap:not(.ex-slideshow) > img { background-color: var(--frame-exhibition, var(--bg-3)); }

/* Exhibition subpage image size variants */
.subpage-images.spsize-small  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.subpage-images.spsize-medium { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.subpage-images.spsize-large  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem; }
.subpage-images.spsize-xlarge { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 2.4rem; }

/* Bio frame color + photo width variants */
.bio-photo { background-color: var(--frame-bio, var(--bg-3)); }
.bio-layout.bio-narrow  { grid-template-columns: 1fr 3fr; }
.bio-layout.bio-wide    { grid-template-columns: 1fr 1fr; }
.bio-layout.bio-full    { grid-template-columns: 1fr; }

/* Contact frame color + image width variants */
.contact-img { background-color: var(--frame-contact, var(--bg-3)); }
.contact-layout.contact-narrow  { grid-template-columns: 1fr 3fr; }
.contact-layout.contact-wide    { grid-template-columns: 3fr 2fr; }
.contact-layout.contact-full    { grid-template-columns: 1fr; }

/* ── Relic page divider ── */
.relic-divider {
  border: none;
  border-top: 1px solid var(--border, rgba(234,242,255,0.08));
  margin: 3rem 0;
}

/* ── CV Contact Strip ── */
.cv-contact-strip {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border, rgba(234,242,255,0.08));
}
.cv-contact-inner {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cv-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.cv-contact-label {
  font-family: var(--mono, 'Courier New', monospace);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim, #7a8a9e);
}
.cv-contact-item a {
  color: var(--text-bright, #eaf2ff);
  text-decoration: none;
  transition: color 0.3s;
}
.cv-contact-item a:hover {
  color: var(--nav-hover-color, var(--text-bright));
}