@font-face {
  font-family: "W95Fa";
  src: url("../../../assets/fonts/W95FA.otf") format("opentype");
}

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

:root {
  /* Color — Palette */
  --void: #050505;
  --black: #000000;
  --white: #ffffff;
  --white-glow: rgba(255, 255, 255, 0.25);

  /* Color — Accents */
  --pink: #ff315c;
  --pink-glow: rgba(255, 49, 92, 0.45);
  --cyan: #00e5ff;
  --blood: #ff1a1a;

  /* Color — Labels & Text */
  --cctv-label: #ffffff;
  --info-label: #ffffff;
  --status-text: #777777;

  /* Layout */
  --shell-max: 1080px;

  /* Font Size Scale */
  --fs-1: 0.65rem;
  --fs-2: 0.75rem;
  --fs-3: 0.85rem;
  --fs-4: 0.95rem;
  --fs-5: 1.1rem;
  --fs-6: 1.25rem;
  --fs-7: 1.4rem;
  --fs-8: 1.55rem;
  --fs-heading: clamp(0.85rem, 1.9vw, 1.3rem);
  --fs-display: clamp(1.75rem, 5.5vw, 3.75rem);

  /* Spacing Scale */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 36px;
  --sp-10: 52px;
}

/* ── BODY: Unified font family across all elements ── */
body {
  background-color: #ffffff;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.98) 100%),
    url("ambient-bg.webp");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: "W95Fa", "Courier New", monospace;
  color: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(70px, 12vh, 100px) var(--sp-6) var(--sp-10);
  position: relative;
  overflow-x: hidden;
}

/* ── BACK LINK (No Red Shadow, Clean Button) ── */
.back-link {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 120;
  padding: var(--sp-2) var(--sp-5);
  background: var(--black);
  color: var(--white);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-4);
  font-weight: bold;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  box-shadow: none;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.back-link:hover {
  transform: translateY(-1px);
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
  box-shadow: none;
}

/* ── PAGE SHELL (Borderless & Transparent) ── */
.page {
  width: 100%;
  max-width: var(--shell-max);
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}

/* ── HERO TITLE BLOCK (Unified Font) ── */
.title-block {
  text-align: left;
  margin-bottom: var(--sp-10);
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
}

.title-wrap {
  position: relative;
  display: block;
}

.main-title {
  font-size: var(--fs-display);
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.9;
  display: block;
  font-family: "W95Fa", "Courier New", monospace;
  text-shadow: none;
}

.tagline {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-4);
  color: #000000;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: var(--sp-4);
  font-weight: bold;
  display: block;
}

.source-quote {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-5);
  color: #444444;
  font-style: italic;
  margin-top: var(--sp-5);
  letter-spacing: .02em;
  line-height: 1.6;
  max-width: 680px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: block;
}

/* ── CHAPTER / PROJECT INDEX ── */
/* ── PROJECT LIST & HOVER PREVIEW CONTAINER (Feature Image Behind Text) ── */
.projects-container {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 65vh, 720px);
  margin: var(--sp-9) 0 var(--sp-10);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.project-title-list {
  position: relative;
  z-index: 10;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-8);
}

.project-item {
  margin: 0;
  padding: 0;
}

.project-title-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-heading);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.25;
  text-decoration: none;
  background: #000000;
  padding: var(--sp-2) var(--sp-5);
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85);
  width: fit-content;
  transition: color .2s ease, transform .2s ease, background .2s ease;
  cursor: pointer;
}

.project-card-num {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: 0.85em;
  color: #888888;
  font-weight: normal;
  letter-spacing: .04em;
  transition: color .2s ease;
}

.project-title-link:hover,
.project-title-link.is-hovered {
  color: var(--pink);
  transform: translateX(8px);
  background: #000000;
}

.project-title-link:hover .project-card-num,
.project-title-link.is-hovered .project-card-num {
  color: var(--pink);
}

/* ── PREVIEW STAGE (Feature Image Behind Text) ── */
.project-preview-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.project-preview-item {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  animation: fadeInPreview 0.25s ease forwards;
}

.project-preview-item.is-active {
  display: block;
}

.project-preview-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  border: none;
  filter: contrast(1.05);
  transition: transform .3s ease, filter .3s ease;
}

.project-preview-item:hover img {
  transform: scale(1.02);
  filter: contrast(1.15);
}

@keyframes fadeInPreview {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── TEXT BLOCKS & LINKS (White Links) ── */
.text-block {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-5);
  color: #222222;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: var(--sp-8);
  background: transparent;
  border: none;
  padding: 0;
}
.text-block p {
  margin-bottom: var(--sp-4);
}

.text-block a, .info-panel a {
  font-family: "W95Fa", "Courier New", monospace;
  color: #000000;
  text-decoration: underline;
  transition: color .15s ease;
}
.text-block a:hover, .info-panel a:hover {
  color: var(--pink);
}

blockquote {
  font-family: "W95Fa", "Courier New", monospace;
  border-left: 4px solid var(--pink);
  padding: var(--sp-3) var(--sp-6);
  margin: var(--sp-6) 0;
  color: #111111;
  font-style: italic;
  font-size: var(--fs-6);
  background: transparent;
}

/* ── CREDITS SECTION (Clean & White) ── */
.credits-section {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border: none;
  background: transparent;
}

.credits-group {
  margin-bottom: var(--sp-8);
}

.credits-label {
  font-family: "W95Fa", "Courier New", monospace;
  color: #000000;
  font-size: var(--fs-5);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  font-weight: bold;
  border: none;
  padding-left: 0;
}

.credits-sublabel {
  font-family: "W95Fa", "Courier New", monospace;
  color: #555555;
  font-size: var(--fs-3);
  font-style: italic;
  margin-bottom: var(--sp-3);
}

.credits-line {
  font-family: "W95Fa", "Courier New", monospace;
  color: #444444;
  font-size: var(--fs-5);
  line-height: 1.8;
}

/* ── BOTTOM STATUS BAR (Blinkie & Centered Status) ── */
.status-bar {
  width: 100%;
  max-width: var(--shell-max);
  background: transparent;
  border: none;
  padding: var(--sp-8) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  text-align: center;
}

.footer-blinkie {
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  height: auto;
  max-width: 150px;
}

.status-text {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-1);
  color: #555555;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── PROJECT DETAIL PAGES ── */
.project-page .project-title {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-heading);
  color: #000000;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}

.project-question {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-6);
  color: var(--pink);
  font-style: italic;
  letter-spacing: .02em;
  margin-bottom: var(--sp-3);
}

.project-media {
  margin: var(--sp-8) 0;
  width: 100%;
  position: relative;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-6);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  user-select: none;
}

.gallery-nav-btn:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.gallery-nav-btn.prev {
  left: var(--sp-4);
}

.gallery-nav-btn.next {
  right: var(--sp-4);
}

.featured-panel {
  position: relative;
  background: transparent;
  border: none;
  overflow: hidden;
}

.featured-img {
  width: 100%;
  display: block;
  max-height: 620px;
  object-fit: contain;
  background: transparent;
  border: none;
  cursor: zoom-in;
}

.featured-img.is-hidden {
  display: none;
}

.featured-video {
  width: 100%;
  max-height: 620px;
  display: none;
  object-fit: contain;
  background: #000;
  border: none;
}

.featured-video.is-active {
  display: block;
}

.cctv-stamp {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-4);
  font-size: var(--fs-2);
  color: var(--white);
  letter-spacing: .08em;
  font-family: "W95Fa", "Courier New", monospace;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
}

.cctv-stamp-tr {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  font-size: var(--fs-2);
  color: var(--white);
  letter-spacing: .08em;
  font-family: "W95Fa", "Courier New", monospace;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
}

/* ── IMAGE GRIDS ── */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
}

.image-card {
  position: relative;
  background: transparent;
  border: none;
  overflow: hidden;
  transition: transform .2s ease;
  cursor: pointer;
}

.image-card:hover {
  transform: translateY(-2px);
}

.image-card img,
.image-card video {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .3s ease;
  background: #000;
}

.image-card:hover img,
.image-card:hover video {
  transform: scale(1.04);
}

.video-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--white);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-1);
  letter-spacing: .08em;
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.image-card figcaption {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(0, 0, 0, 0.85);
  color: var(--white);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-2);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── INFO PANELS (Clean & Borderless) ── */
.info-panel {
  background: transparent;
  border: none;
  padding: var(--sp-4) 0;
  position: relative;
  margin-top: var(--sp-6);
}

.panel-label {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-3);
  color: #000000;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  border: none;
  padding-bottom: 0;
  font-weight: bold;
}

.panel-text {
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-5);
  color: #222222;
  line-height: 1.65;
}

/* ── LIGHTBOX ── */
body.lightbox-open {
  overflow: hidden;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10);
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(8px);
}

.image-lightbox.is-open {
  display: flex;
}

.lightbox-frame {
  position: relative;
  width: min(100%, 1120px);
  max-height: calc(100vh - 48px);
  padding: var(--sp-8);
  background: var(--black);
  border: none;
  box-shadow: none;
}

.lightbox-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  background: var(--black);
}

.lightbox-img.is-hidden {
  display: none;
}

.lightbox-video {
  display: none;
  width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  background: var(--black);
  outline: none;
}

.lightbox-video.is-active {
  display: block;
}

.lightbox-caption {
  font-family: "W95Fa", "Courier New", monospace;
  margin-top: var(--sp-4);
  color: var(--white);
  font-size: var(--fs-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lightbox-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-7);
  cursor: pointer;
}

.lightbox-close:hover {
  background: var(--white);
  color: var(--black);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 220;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-7);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  user-select: none;
}

.lightbox-nav-btn:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.lightbox-nav-btn.prev {
  left: var(--sp-4);
}

.lightbox-nav-btn.next {
  right: var(--sp-4);
}

.image-card.is-active-thumb {
  border-color: var(--white);
}
.image-card.is-active-thumb img {
  transform: scale(1.03);
}

/* ── PROJECT NAVIGATION (Previous / Next) ── */
.project-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  width: 100%;
}

.project-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: "W95Fa", "Courier New", monospace;
  font-size: var(--fs-5);
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--sp-2) 0;
  transition: color .2s ease, transform .2s ease;
}

.project-nav-link.prev:hover {
  color: var(--pink);
  transform: translateX(-4px);
}

.project-nav-link.next:hover {
  color: var(--pink);
  transform: translateX(4px);
}

.project-nav-link .nav-arrow {
  font-size: 1.1em;
  color: #000000;
  transition: color .2s ease;
}

.project-nav-link:hover .nav-arrow {
  color: var(--pink);
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 768px) {
  body {
    padding: clamp(60px, 10vh, 80px) var(--sp-4) var(--sp-8);
  }
  .title-block {
    margin-bottom: var(--sp-8);
  }
  .source-quote {
    font-size: var(--fs-4);
  }
  .projects-container {
    min-height: clamp(380px, 50vh, 520px);
  }
  .project-title-list {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .project-preview-item img {
    object-position: center;
    opacity: 0.65;
  }
  .project-nav {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-5);
    text-align: center;
  }
}