/* Project detail – adjust fonts/colours to your brand */
.prj { --ink:#1a1a1a; --line:#1a1a1a; --sand:#e9e6df; --gap:clamp(16px,3vw,48px);
	max-width:1600px; margin:0 auto; padding:0 var(--gap); color:var(--ink); }
.prj .mono { font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.prj img { display:block; max-width:100%; height:auto; }

.prj-hero img { width:100%; }
.prj-intro { display:grid; gap:var(--gap); padding:var(--gap) 0; text-align:center; }
.prj-eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin:0; }
.prj-title { font-size:clamp(14px,1.4vw,18px); letter-spacing:.15em; text-transform:uppercase; margin:.4em 0; }
.prj-meta { font-size:11px; opacity:.6; margin:0; }
.prj-intro__body { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); text-align:left; align-items:start; }
.prj-details { display:grid; grid-template-columns:max-content 1fr; gap:6px 24px; font-size:12px; margin:24px 0 0; }
.prj-details dt { opacity:.6; } .prj-details dd { margin:0; }
.prj-stats { list-style:none; margin:0; padding:0; display:flex; gap:var(--gap); justify-content:flex-end; }
.prj-stats li { text-align:center; display:grid; gap:6px; justify-items:center; }
.prj-stats strong { font-size:22px; } .prj-stats span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.prj-stats img { height:48px; width:auto; }

/* Gallery */
.prj-gallery { display:grid; grid-template-columns:1fr 110px; gap:24px; margin:var(--gap) 0; }
.prj-gallery__main { position:relative; aspect-ratio:3/2; }
.prj-gallery__main .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s; }
.prj-gallery__main .slide.is-active { opacity:1; }
.prj-gallery__thumbs { display:flex; flex-direction:column; gap:12px; max-height:100%; overflow:auto; }
.thumb { padding:0; border:0; background:none; cursor:pointer; opacity:.55; transition:opacity .2s; }
.thumb.is-active, .thumb:hover { opacity:1; }
.thumb img { width:100%; aspect-ratio:1; object-fit:cover; }

.prj-statement { padding:var(--gap) 0; font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:clamp(16px,1.6vw,22px); max-width:640px; }

/* Phase cards */
.prj-phase-cards { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.prj-phase-card { position:relative; text-align:left; background:#fff; border:0; border-right:1px solid var(--line);
	padding:20px; min-height:360px; display:flex; flex-direction:column; cursor:pointer; font:inherit; color:inherit; transition:background .25s; }
.prj-phase-card:last-child { border-right:0; }
.prj-phase-card.is-active, .prj-phase-card:hover { background:var(--sand); }
.prj-phase-card .num { font-size:22px; font-weight:700; }
.prj-phase-card .arrow { position:absolute; top:24px; right:20px; width:10px; height:10px; border-right:1px solid; border-top:1px solid; transform:rotate(45deg); }
.prj-phase-card .ttl { margin-top:auto; font-size:16px; letter-spacing:.12em; text-transform:uppercase; }
.prj-phase-card img { margin-top:20px; width:100%; aspect-ratio:4/3; object-fit:cover; }

/* Panel */
.prj-phase-panel { display:none; grid-template-columns:minmax(260px,1fr) 2.2fr; gap:var(--gap); padding:var(--gap) 0; }
.prj-phase-panel.is-active { display:grid; }
.prj-phase-panel h2 { font-size:clamp(18px,2vw,26px); letter-spacing:.1em; text-transform:uppercase; line-height:1.15; margin:0 0 48px; }

/* Vertical accordion */
.prj-acc { list-style:none; margin:0; padding:0; }
.prj-acc__btn { width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; text-align:left;
	background:none; border:0; padding:8px 0; cursor:pointer; color:inherit;
	font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.prj-acc__btn i { position:relative; flex:0 0 14px; height:14px; margin-top:3px; }
.prj-acc__btn i::before, .prj-acc__btn i::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor; }
.prj-acc__btn i::after { transform:rotate(90deg); transition:transform .25s; }
.is-open > .prj-acc__btn i::after { transform:rotate(0); }
.prj-acc__panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.is-open > .prj-acc__panel { grid-template-rows:1fr; }
.prj-acc__inner { overflow:hidden; font-size:14px; line-height:1.6; }
.is-open .prj-acc__inner { padding:8px 0 16px; }

/* Slider (panel) */
.prj-slider__track { position:relative; }
.prj-slider .slide { display:none; margin:0; }
.prj-slider .slide.is-active { display:block; animation:prjFade .4s; }
@keyframes prjFade { from{opacity:0} to{opacity:1} }
.slide__row { display:grid; grid-template-columns:1fr 100px; gap:24px; align-items:start; }
.slide__img { width:100%; }
.slide__thumbs { display:grid; gap:16px; justify-items:center; }
.slide__thumbs img { width:100%; }
.slide__thumbs figcaption { margin-top:8px; text-align:center; }
.slide__caption { text-align:center; margin-top:24px; }
.prj-slider__bullets { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.bullet { min-width:14px; min-height:14px; border-radius:50%; border:1px solid var(--ink); background:transparent; padding:0; cursor:pointer; }
.bullet.is-active { background:#ccc; }

/* Related */
.prj-related { padding:var(--gap) 0; text-align:center; }
.prj-related__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin-top:24px; }
.prj-related__grid a { color:inherit; text-decoration:none; display:grid; gap:10px; }

@media (max-width:900px) {
	.prj-intro__body, .prj-phase-panel.is-active, .prj-gallery { grid-template-columns:1fr; }
	.prj-stats { justify-content:flex-start; }
	.prj-phase-cards { grid-template-columns:1fr 1fr; }
	.prj-phase-card { min-height:240px; border-bottom:1px solid var(--line); }
	.prj-gallery__thumbs { flex-direction:row; }
	.thumb { width:72px; flex:0 0 auto; }
}