/* Shared project detail page styles (used with uefn.css or traditional.css) */
:root {
  --bg-color: #000000;
  --text-color: #ffffff;
  --divider-color: #333333;
  --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-title: 'Josefin Sans', sans-serif;
  --font-site-title: 'Raleway', sans-serif;
}
.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.project-not-found-msg { font-size: 18px; margin: 60px 0 24px; color: var(--text-color, #fff); }
main p,
.hero-desc p,
.split-row .text-col p { line-height: 1.5; }
.hero-title { font-family: var(--font-site-title, inherit); font-weight: 400; font-size: 69px; text-align: center; margin: 30px 0 20px; }
.hero-meta { text-align: center; margin-bottom: 20px; font-size: 16px; }
.hero-columns { display: flex; gap: 20px; margin-bottom: 20px; }
.hero-desc { flex: 6; }
.hero-resp, .hero-resp-static { flex: 4; }
.hero-resp ul, .hero-resp-static ul { list-style-type: disc; padding-left: 20px; margin-bottom: 20px; }
.hero-resp li, .hero-resp-static li { font-size: 16px; margin-bottom: 5px; }
.hero-resp > p + ul + p, .hero-resp-static > p + ul + p { margin-top: 12px; }
.gallery-wrap, .gallery-slideshow {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  background: #000;
  width: 100%;
  min-height: 200px;
}
.slideshow-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.gallery-wrap .slide, .gallery-slideshow .slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}
/* Fallback for single-image slideshows (no track wrapper) */
.gallery-wrap > .slide, .gallery-slideshow > .slide {
  display: block;
}
.gallery-wrap .nav-arrow, .gallery-slideshow .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  background: rgba(0,0,0,0.45);
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease;
}
.gallery-wrap:hover .nav-arrow,
.gallery-slideshow:hover .nav-arrow { opacity: 1; }
.gallery-wrap .nav-arrow:hover,
.gallery-slideshow .nav-arrow:hover { background: rgba(0,0,0,0.7); }
.gallery-wrap .nav-prev, .gallery-slideshow .nav-prev { left: 10px; }
.gallery-wrap .nav-next, .gallery-slideshow .nav-next { right: 10px; }

.slideshow-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-wrap:hover .slideshow-dots,
.gallery-slideshow:hover .slideshow-dots,
[data-slideshow]:hover .slideshow-dots { opacity: 1; }
.slideshow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slideshow-dot.is-active {
  background: #ffffff;
  transform: scale(1.3);
}
.slideshow-counter {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.45);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-wrap:hover .slideshow-counter,
.gallery-slideshow:hover .slideshow-counter,
[data-slideshow]:hover .slideshow-counter { opacity: 1; }
.split-row { display: flex; gap: 24px; margin-bottom: 36px; align-items: flex-start; }
.split-row.split-row--balanced { align-items: center; }
.split-row .img-col { flex: 1; min-width: 0; }
.split-row .img-col > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.split-row .img-col--constrained { flex: 0 1 420px; max-width: 420px; }
.split-row .img-col--constrained .gallery-wrap,
.split-row .img-col--constrained .gallery-slideshow { margin-bottom: 0; }
/* Single image in narrow column (e.g. Barnyard team grid): no forced 16:9 — that + cover was cropping portraits. */
.split-row .img-col--constrained > img {
  aspect-ratio: unset;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  display: block;
}
/* Layout sketches / docs in a narrow column: show the full image (cover was cropping ~half the frame with SLIDESHOW_HEIGHT_SCALE). */
.split-row .img-col--constrained .gallery-wrap .slide,
.split-row .img-col--constrained .gallery-slideshow .slide {
  object-fit: contain;
  object-position: center center;
}
.split-row .text-col { flex: 1; }
.split-row .text-col p { margin-bottom: 1.25em; }
.split-row .text-col p:last-child { margin-bottom: 0; }
/* Full-width section image (wide maps, panoramas) */
.section-banner { margin-bottom: 28px; }
.section-banner > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Short crop for ultra-wide hub shots (drops empty ceiling, keeps floor action) */
.section-banner--crop {
  overflow: hidden;
  max-height: 200px;
}
.section-banner--crop > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center 72%;
}
/* Stacked screenshots in one split-row column */
.split-row .img-col--stack > img + img { margin-top: 20px; }
/* When no image: text uses full width (prompt uses split-row--text-only) */
.split-row.split-row--text-only .text-col { flex: 1 1 100%; max-width: 100%; }
/* When image fails to load: hide img-col, text expands to full width */
.split-row.img-missing .img-col { display: none; }
.split-row.img-missing .text-col { flex: 1 1 100%; max-width: 100%; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-bottom: 36px; }
.grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px 18px; margin-bottom: 36px; }
.grid-item img { width: 100%; margin-bottom: 20px; }

/* Dead City (slug thelastones): cropped stills (object-fit cover) so captures read at a glance */
.project-detail-thelastones .tl-crop {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  box-sizing: border-box;
}
.project-detail-thelastones .grid-2col .grid-item .tl-crop {
  margin-bottom: 20px;
}
.project-detail-thelastones .tl-crop--env {
  object-position: center 42%;
}
.project-detail-thelastones .tl-crop--xp {
  object-position: center 48%;
}
.project-detail-thelastones .tl-crop--vault {
  object-position: center 38%;
}
.project-detail-thelastones .tl-crop--hud {
  object-position: 24% center;
}
.project-detail-thelastones .tl-crop--npc {
  object-position: center 22%;
}
.project-detail-thelastones .tl-crop--ambient {
  object-position: center 55%;
}
.project-detail-thelastones .split-row.tl-clarity-row {
  align-items: center;
}
.project-detail-thelastones .split-row.tl-pitch-row {
  align-items: center;
}
.project-detail-thelastones .split-row.tl-pitch-row .text-col {
  flex: 1 1 44%;
  min-width: 0;
}
.project-detail-thelastones .split-row.tl-pitch-row .img-col {
  flex: 1 1 52%;
  min-width: 0;
}
.project-detail-thelastones .split-row.tl-pitch-row .gallery-wrap,
.project-detail-thelastones .split-row.tl-pitch-row .gallery-slideshow {
  margin-bottom: 0;
  width: 100%;
}
/* Pitch deck slideshows: show full slide (letterbox on #000) — hero slideshow unchanged */
.project-detail-thelastones .split-row.tl-pitch-row .gallery-wrap .slide,
.project-detail-thelastones .split-row.tl-pitch-row .gallery-slideshow .slide {
  object-fit: contain;
  object-position: center center;
}

/* Dino Tycoon (slug dinotycoon): match Dead City still treatment */
.project-detail-dinotycoon .dt-crop {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  box-sizing: border-box;
}
.project-detail-dinotycoon .grid-2col .grid-item .dt-crop {
  margin-bottom: 20px;
}
.project-detail-dinotycoon .split-row.dt-pitch-row {
  align-items: center;
}
.project-detail-dinotycoon .split-row.dt-pitch-row .text-col {
  flex: 1 1 44%;
  min-width: 0;
}
.project-detail-dinotycoon .split-row.dt-pitch-row .img-col {
  flex: 1 1 52%;
  min-width: 0;
}
.project-detail-dinotycoon .split-row.dt-pitch-row .gallery-wrap,
.project-detail-dinotycoon .split-row.dt-pitch-row .gallery-slideshow {
  margin-bottom: 0;
  width: 100%;
}
.project-detail-dinotycoon .split-row.dt-pitch-row .gallery-wrap .slide,
.project-detail-dinotycoon .split-row.dt-pitch-row .gallery-slideshow .slide {
  object-fit: contain;
  object-position: center center;
}
.project-detail-dinotycoon .split-row.dt-sandbox-row {
  align-items: center;
}
/* Dino hero slideshows (not .dt-pitch-row): height scaled in JS (SLIDESHOW_HEIGHT_SCALE); pitch row uses full 16:9 + contain */
.project-detail-dinotycoon main .gallery-wrap[data-fixed-aspect] .slide {
  object-fit: cover;
  object-position: center center;
}
.project-detail-dinotycoon main .gallery-wrap[data-fixed-aspect="16:9"] .slide.dt-slide--focus-low {
  object-position: center 65%;
}
.project-detail-dinotycoon main .gallery-wrap[data-fixed-aspect="16:9"] .slide.dt-slide--focus-high {
  object-position: center 35%;
}

/* Bridges (slug bridges): match Dino / Dead City still treatment */
.project-detail-bridges .br-crop {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  box-sizing: border-box;
}
.project-detail-bridges .grid-2col .grid-item .br-crop {
  margin-bottom: 20px;
}
.project-detail-bridges .split-row.br-map-row {
  align-items: center;
}
.project-detail-bridges .split-row.br-map-row .text-col {
  flex: 1 1 44%;
  min-width: 0;
}
.project-detail-bridges .split-row.br-map-row .img-col {
  flex: 1 1 52%;
  min-width: 0;
}
.project-detail-bridges .split-row.br-map-row .gallery-wrap,
.project-detail-bridges .split-row.br-map-row .gallery-slideshow {
  margin-bottom: 0;
  width: 100%;
}
.project-detail-bridges .split-row.br-retention-row {
  align-items: center;
}
.project-detail-bridges main .gallery-wrap[data-fixed-aspect] .slide {
  object-fit: cover;
  object-position: center center;
}

/* Card Tycoon: Bridges-style grid (image on top, caption below) — not narrow stacked strips */
.project-detail-cardtycoon .ct-frame {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  box-sizing: border-box;
}
.project-detail-cardtycoon .grid-2col .grid-item .ct-frame {
  margin-bottom: 16px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  height: auto;
}
.project-detail-cardtycoon .grid-2col .grid-item .ct-frame.ct-crop--pack {
  object-position: center 42%;
}
.project-detail-cardtycoon .grid-2col .grid-item .ct-frame.ct-crop--shop {
  object-position: center 35%;
}
.project-detail-cardtycoon .grid-2col .grid-item h3.item-title {
  margin-top: 0;
}
.project-detail-cardtycoon .grid-2col .grid-item p {
  margin-bottom: 0;
}
.project-detail-cardtycoon .grid-2col .grid-item--span2 {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--divider-color, #333);
}
.project-detail-cardtycoon .split-row.ct-intro-row {
  align-items: center;
  gap: 28px;
}
.project-detail-cardtycoon .split-row.ct-intro-row .text-col,
.project-detail-cardtycoon .split-row.ct-intro-row .img-col {
  flex: 1;
  min-width: 0;
}

.grid-item iframe { width: 100%; aspect-ratio: 16/9; border: none; margin-bottom: 20px; }
.video-full iframe { width: 100%; aspect-ratio: 16/9; border: none; margin-bottom: 30px; }
.item-title { font-family: var(--font-title, inherit); font-weight: 400; font-size: 24px; margin-bottom: 10px; letter-spacing: -0.01em; color: #fff; }
.item-title-secondary { font-size: 30px; font-weight: 400; margin-bottom: 10px; }
.section-title {
  font-family: 'Space Grotesk', var(--font-title, inherit);
  font-weight: 600;
  font-size: 28px;
  text-align: left;
  margin: 32px 0 20px;
  letter-spacing: -0.02em;
  padding-left: 16px;
  border-left: 3px solid #FF5F00;
}
.divider { border: none; border-top: 1px solid var(--divider-color, #333); margin: 32px 0; }
footer { text-align: center; padding: 40px 0 60px; }
footer p { margin-bottom: 5px; font-weight: 300; }
footer a:hover { text-decoration: underline; }
/* Animated stat bar */
.stat-bar {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 28px 20px;
  margin: 10px 0 10px;
  border-top: 1px solid var(--divider-color, #333);
  border-bottom: 1px solid var(--divider-color, #333);
}
.stat-bar .stat {
  text-align: center;
}
.stat-bar .stat-number {
  font-family: var(--font-title, inherit);
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  display: block;
  line-height: 1.1;
}
.stat-bar .stat-label {
  font-size: 13px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #aaa;
  margin-top: 4px;
  display: block;
}
/* Horizontal bar chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
}
.bar-chart .bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar-chart .bar-label {
  flex: 0 0 140px;
  text-align: right;
  font-size: 13px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
}
.bar-chart .bar-track {
  flex: 1;
  height: 22px;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.bar-chart .bar-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.bar-chart .bar-fill.animated { /* width set by JS */ }
.bar-chart .bar-value {
  flex: 0 0 48px;
  font-family: var(--font-title, inherit);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
/* Color accents */
.bar-fill--blue { background: linear-gradient(90deg, #3a7bd5, #5ca0f2); }
.bar-fill--green { background: linear-gradient(90deg, #2ecc71, #4bf29a); }
.bar-fill--orange { background: linear-gradient(90deg, #e67e22, #f5a623); }
.bar-fill--purple { background: linear-gradient(90deg, #8e44ad, #b86cd9); }
.bar-fill--cyan { background: linear-gradient(90deg, #00b4d8, #48e5ff); }
.bar-fill--red { background: linear-gradient(90deg, #e74c3c, #ff6b6b); }

/* ── Text hierarchy: tighter body text, more breathing room ───────────────── */
main p,
.hero-desc p,
.split-row .text-col p,
.grid-item p {
  font-size: 16px;
  line-height: 1.65;
  color: #ccc;
}
.split-row .text-col p { margin-bottom: 1.15em; }

/* Lead-in: first paragraph directly after a section title reads as a summary */
.section-title + p,
.section-title + .split-row > .text-col > p:first-child,
.section-title + .split-row--text-only > .text-col > p:first-child {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* ── Project section TOC ──────────────────────────────────────────────────── */
.project-toc {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 180px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.project-toc.toc-visible { opacity: 1; transform: translateY(-50%) translateX(0); }
.project-toc-item {
  display: block;
  padding: 7px 14px 7px 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: normal;
  line-height: 1.35;
  text-transform: uppercase;
}
.project-toc-item:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
}
.project-toc-item.toc-active {
  color: #FF5F00;
  border-left-color: #FF5F00;
}

/* Animated underline on <mark> phrases (converted to .hl-underline by JS) */
.hl-underline {
  background-image: linear-gradient(#FF5F00, #FF5F00);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-underline.hl-visible {
  background-size: 100% 2px;
}

@media (max-width: 1280px) {
  .project-toc { display: none; }
}
@media (max-width: 768px) {
  .hero-columns { flex-direction: column; }
  .split-row { flex-direction: column; }
  .grid-2col, .grid-3col { grid-template-columns: 1fr; }
  .stat-bar { gap: 24px; flex-wrap: wrap; }
  .stat-bar .stat-number { font-size: 30px; }
  .bar-chart .bar-label { flex: 0 0 90px; font-size: 11px; }
}