/* ============================================================
   VELOSYS — v8 · PROJECT CASE STUDY
   Standardized CMS template styles (anchored to basement.studio dedicated
   project pages). Loaded after style.css; reuses the shared tokens, chrome
   (nav / menu / overlay / footer) and cursor. Page-specific layout only.
   ============================================================ */

.project-page { background: var(--c-bg); color: var(--c-fg); }

/* project pages show the menu capsule at all times (no expanded bottom bar to
   collide with the cover photo) */
.project-page .sitenav-full { display: none; }
.project-page .sitenav-capsule { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------
   TOP BAR — back to the index + the project's place in the work list
   ------------------------------------------------------------ */
.project-bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 38px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--type-display);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.01em;
  color: var(--c-fg);
  transition: gap var(--t-hover) var(--ease-hover);
}
.project-back:hover { gap: 0.78em; }
.project-back-arr { color: var(--c-accent); transition: transform var(--t-hover) var(--ease-hover); }
.project-back:hover .project-back-arr { transform: translateX(-3px); }
.project-bar-index { color: var(--c-mute); }

/* ------------------------------------------------------------
   HERO — eyebrow, layered title, one-line descriptor
   ------------------------------------------------------------ */
.project-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(32px, 4vw, 56px);
}
.project-eyebrow { display: block; color: var(--c-accent); margin-bottom: clamp(24px, 3vw, 40px); }

/* the project title rides the shared layered-head grammar (serif soul + ghost echo) */
.project-title {
  font-family: var(--type-em);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(48px, 8.5vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--c-fg);
  max-width: 16ch;
}
.project-title .em { font-size: 1em; }
.project-tagline {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--type-display);
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.012em;
  max-width: 30ch;
  color: var(--c-fg);
}

/* ------------------------------------------------------------
   COVER — full-bleed-ish hero media
   ------------------------------------------------------------ */
.project-cover {
  max-width: var(--wrap);
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding: 0 var(--gutter);
}
.project-cover img,
.project-cover .ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ------------------------------------------------------------
   BODY — basement two-column: sticky meta + overview (left), media stream (right)
   ------------------------------------------------------------ */
.project-body {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 130px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.project-aside { position: sticky; top: clamp(28px, 5vh, 56px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 52px); }

.project-spec { display: flex; flex-direction: column; }
.project-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line);
}
.project-spec-row:last-child { border-bottom: 1px solid var(--c-line); }
.project-spec dt { color: var(--c-mute); flex: 0 0 auto; padding-top: 2px; }
.project-spec dd {
  font-family: var(--type-display);
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: -0.005em;
  text-align: right;
  color: var(--c-fg);
}
.project-spec-link {
  display: inline-flex;
  gap: 0.35em;
  color: var(--c-accent);
  position: relative;
}
.project-spec-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--c-accent);
  transition: right var(--t-hover) var(--ease-hover);
}
.project-spec-link:hover::after { right: 0; }

.project-overview { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }
.project-lede {
  font-family: var(--type-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--c-fg);
}
.project-prose {
  font-family: var(--type-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-fg);
  opacity: 0.78;
}

/* ------------------------------------------------------------
   STREAM — interleaved chapters + media
   ------------------------------------------------------------ */
.project-stream { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }

.project-chapter { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); max-width: 60ch; }
.project-chapter-no { color: var(--c-accent); }
.project-chapter-title {
  font-family: var(--type-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-fg);
}
.project-chapter-body {
  font-family: var(--type-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-fg);
  opacity: 0.82;
}

.project-shot { margin: 0; }
.project-shot img,
.project-shot .ph {
  width: 100%;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}
.project-shot img { aspect-ratio: 16 / 9; }
.project-shot-cap { display: block; margin-top: 12px; color: var(--c-mute); }

.project-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }

/* placeholder media block — a tasteful tonal panel with a centred label, so the
   template reads as a fillable CMS, not a broken image */
.ph {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(20,18,14,0.035) 0 2px, transparent 2px 11px),
    var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="4x5"]  { aspect-ratio: 4 / 5; }
.ph[data-ratio="3x2"]  { aspect-ratio: 3 / 2; }
.ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.ph-label { color: var(--c-mute); }

/* ------------------------------------------------------------
   METRICS — specific result figures (full-width band)
   ------------------------------------------------------------ */
.project-metrics {
  background: #100f0d;
  color: var(--paper);
  --c-line: rgba(248, 246, 241, 0.14);
  --c-mute: rgba(248, 246, 241, 0.55);
  padding: clamp(64px, 9vw, 120px) var(--gutter);
}
.project-metrics-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.project-metric { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.project-metric-fig {
  font-family: var(--type-display);
  font-size: clamp(40px, 5vw, 78px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.project-metric-label { color: var(--c-mute); }

/* ------------------------------------------------------------
   NEXT — the big next-case link (basement signature)
   ------------------------------------------------------------ */
.project-next {
  display: block;
  background: var(--c-bg);
  padding: clamp(64px, 10vw, 150px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.project-next-eyebrow {
  display: block;
  color: var(--c-accent);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.project-next .layer-mark { margin: 0 auto; }
.project-next .layer-soul { color: var(--c-fg); transition: color var(--t-hover) var(--ease-hover); }
.project-next .layer-ghost { color: rgba(20, 18, 14, 0.12); }
.project-next:hover .layer-soul { color: var(--c-accent); }
.project-next-arr {
  display: inline-block;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--type-display);
  font-size: clamp(26px, 2.4vw, 36px);
  color: var(--c-accent);
  transition: transform var(--t-hover) var(--ease-hover);
}
.project-next:hover .project-next-arr { transform: translateX(10px); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .project-body { grid-template-columns: 1fr; gap: clamp(44px, 10vw, 64px); }
  /* the meta unsticks and sits above the stream on the narrow frame */
  .project-aside { position: static; top: auto; }
  .project-title { max-width: none; }
  .project-metrics-inner { grid-template-columns: 1fr 1fr; gap: clamp(28px, 7vw, 40px); }
  .project-duo { grid-template-columns: 1fr; }
  .project-cover img, .project-cover .ph { aspect-ratio: 3 / 2; }
}

@media (max-width: 540px) {
  .project-metrics-inner { grid-template-columns: 1fr; }
}