/* /showcase: the projects and how to propose one. */

.propose { margin-bottom: 30px; border: 2px solid var(--orange); background: radial-gradient(circle at 92% 15%, #3a2016, transparent 45%), linear-gradient(150deg, #1c120d, #07100f 70%); }
.propose-body { padding: 26px 30px 30px; }
.propose h2 { margin: 0 0 12px; font: 800 clamp(30px, 4vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--orange); }
.propose p { margin: 0 0 18px; max-width: 700px; color: #c3c5b9; font-size: 14px; line-height: 1.7; }
.propose a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.propose .big-btn { width: auto; padding: 11px 22px; text-decoration: none; }

.showcase-h2 { margin: 30px 0 16px; font: 800 26px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }

.proj-head { display: flex; align-items: flex-start; gap: 18px; }
.proj-icon { flex: none; width: 72px; height: 72px; padding: 8px; border: 1px solid #22302d; border-radius: 16px; background: #0a1413; object-fit: contain; }
.proj h2 { font-style: normal; }
.proj.green { border-color: var(--green); }
.proj.green h2 { color: var(--green); }
.proj .proj-link { margin: 0 0 14px; }
.proj .proj-link a { color: var(--yellow); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.proj p { margin-bottom: 12px; }
.proj ul { margin: 6px 0 0; padding-left: 18px; }
.proj li { margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: #c3c5b9; }
.proj strong { color: var(--paper); }

@media (max-width: 800px) {
  .propose-body { padding: 20px 18px 24px; }
  .proj-head { gap: 14px; }
  .proj-icon { width: 58px; height: 58px; padding: 6px; border-radius: 13px; }
}