/* Project pages (/projects/*.html): one-screen write-up + gallery.
   Same dark look, type and accent as the Sycamore case study. */
#pj {
  --accent: #7C3AED;
  background: #0e0e0e;
  color: #a3a3a3;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 1.85;
}
#pj *, #pj *::before, #pj *::after { box-sizing: border-box; }
#pj h1, #pj h2, #pj p, #pj ul, #pj blockquote { margin: 0; }
#pj ul { padding: 0; list-style: none; }
#pj a { text-decoration: none; }
#header { background-color: #0e0e0e; }
#pj section, #pj nav.pj-next { background: #0e0e0e; padding-left: 0; padding-right: 0; }
#pj section.pj-quote { background: #151515; }

.pj-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.pj-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }

/* Hero */
.pj-hero { position: relative; padding: 200px 0 90px; background-size: cover; background-position: center; }
.pj-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.82) 55%, #0e0e0e 100%); }
.pj-hero .pj-wrap { position: relative; }
.pj-crumbs { font-size: 12px; color: #8a8a8a; margin-bottom: 34px; display: flex; gap: 8px; flex-wrap: wrap; }
.pj-crumbs a { color: #bdbdbd; }
.pj-crumbs a:hover { color: #fff; }
.pj-hero h1 { color: #fff; font-weight: 700; font-size: clamp(40px, 6vw, 76px); line-height: 1.05; letter-spacing: -1px; margin-bottom: 20px; }
.pj-summary { color: #d6d6d6; font-size: clamp(16px, 1.6vw, 19px); max-width: 760px; margin-bottom: 40px; }
.pj-facts { display: flex; flex-wrap: wrap; gap: 22px 46px; margin-bottom: 40px; }
.pj-k { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #7a7a7a; margin-bottom: 6px; }
.pj-v { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.5; }
.pj-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.pj-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #e6e6e6 !important; border: 1px solid #3a3a3a; border-radius: 5px; padding: 14px 24px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.pj-btn:hover { transform: translateY(-3px); border-color: var(--accent); }
.pj-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.pj-btn-primary:hover { box-shadow: 0 12px 28px rgba(124,58,237,.32); }

/* Write-up */
.pj-about { padding: 90px 0; }
.pj-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 70px; }
#pj .pj-about p { font-size: 16px; line-height: 1.95; margin-bottom: 18px; }
.pj-about p strong { color: #fff; font-weight: 500; }
.pj-about p a { color: #c4b5fd; border-bottom: 1px solid rgba(196,181,253,.35); }
.pj-about p a:hover { color: #fff; }
.pj-did li { color: #e6e6e6; font-size: 15px; font-weight: 400; padding: 12px 0; border-bottom: 1px solid #222; display: flex; gap: 12px; align-items: center; }
.pj-did li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 6px; }

/* Gallery */
.pj-gallery { padding: 30px 0 100px; }
.pj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pj-shot { display: block; overflow: hidden; border-radius: 10px; background: #151515; cursor: zoom-in; }
.pj-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.pj-shot:hover img { transform: scale(1.03); }
.pj-wide { grid-column: 1 / -1; }

/* Quote */
.pj-quote { padding: 90px 0; background: #151515; text-align: center; }
.pj-quote blockquote p { font-size: clamp(18px, 2vw, 22px); font-weight: 300; line-height: 1.75; color: #e2e2e2; max-width: 860px; margin: 0 auto 26px; }
.pj-quote footer strong { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.pj-quote footer span { font-size: 13px; color: #8a8a8a; }

/* Prev / next */
.pj-next { border-top: 1px solid #222; border-bottom: 1px solid #222; }
.pj-next-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 34px; padding-bottom: 34px; }
.pj-next a { color: #fff; font-weight: 500; font-size: 17px; }
.pj-next a span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #7a7a7a; margin-bottom: 4px; }
.pj-next a:hover { color: #c4b5fd; }
.pj-next-r { text-align: right; }
.pj-all { color: #8a8a8a !important; display: flex; }

/* CTA */
.pj-cta { padding: 110px 0; text-align: center; }
.pj-cta h2 { color: #fff; font-weight: 600; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.3px; margin-bottom: 30px; }

@media (max-width: 900px) {
  .pj-hero { padding: 150px 0 70px; }
  .pj-cols { grid-template-columns: 1fr; gap: 40px; }
  .pj-wrap { padding: 0 22px; }
}
@media (max-width: 560px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-next-row { grid-template-columns: 1fr 1fr; }
  .pj-all { display: none !important; }
  .pj-next a { font-size: 15px; }
}