/* project-frame + caption — README §1.6, reused §3. Shared building blocks
   (.project-frame, .project-card, .placeholder-note) plus the homepage's
   .featured-projects grid; .recent-projects (segment pages) adds its own
   grid rules alongside these in Step 3. */

/* Horizontal gutter comes from the nested .container. */
.featured-projects { padding-bottom: 100px; }
.featured-projects__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-24);
	margin-bottom: 40px;
}
.featured-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
	margin-bottom: var(--space-24);
}

.project-frame {
	position: relative;
	background: var(--color-line);
	padding: 20px;
}
.project-frame.is-4-3 { aspect-ratio: 4 / 3; }
.project-frame.is-16-10 { aspect-ratio: 16 / 10; }
.project-frame img { width: 100%; height: 100%; object-fit: cover; }
.project-frame__inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-16);
	border: 1px dashed var(--color-frame-rule);
}
.project-frame__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: #6B6B6B;
}

.project-card__title {
	margin-top: 18px;
	margin-bottom: 4px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	color: var(--color-ink);
}
.project-card__title--placeholder { color: var(--color-muted); font-weight: 500; }
.project-card__meta {
	margin: 0;
	font-size: 14px;
	color: var(--color-muted);
}

.recent-projects { padding-top: 76px; }
.recent-projects__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: var(--space-24);
}

.placeholder-note {
	border: 1px solid var(--color-line);
	background: var(--color-tint);
	padding: 18px 22px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-muted);
}

@media (max-width: 1023px) {
	.featured-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.featured-projects { padding-bottom: 56px; }
	.featured-projects__grid { grid-template-columns: 1fr; }
	/* README §2: mobile shows one frame + caption, not the full desktop set. */
	.featured-projects__grid > .project-card:nth-child(n+2) { display: none; }

	.recent-projects { padding-top: 48px; }
	.recent-projects__grid { grid-template-columns: 1fr; }
}