/* /portfolio/ page styles. Shared tokens and the dp-* kit live in styles.css.
   One section per project, image and copy alternating sides, like the portfolio PDF. */
.pf-hero { padding-bottom: 24px; }
.pf-note { margin-top: 18px; font-size: 0.88rem; color: var(--ink-2); }

.pc { padding-block: 88px; }
.pc-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.pc-grid--rev .pc-copy { order: 2; }
.pc-num { display: flex; align-items: center; gap: 12px; }
.pc-num .num { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.pc-status {
  font-size: 0.8rem; font-weight: 600; color: var(--ink-2); background: #EDEDF0;
  border-radius: 999px; padding: 5px 13px;
}
.pc-status--live { color: var(--accent); background: #EAF1FE; }
.pc .dp-h2 { margin-top: 14px; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); max-width: 16ch; }
.pc-sub { margin-top: 8px; color: var(--ink-2); font-size: 1.05rem; }
.pc-k { margin-top: 28px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-family: var(--font-body); }
.pc-goal { margin-top: 8px; font-size: 1.12rem; }
.pc-built { list-style: none; margin-top: 10px; display: grid; gap: 8px; }
.pc-built li { position: relative; padding-left: 24px; color: var(--ink-2); }
.pc-built li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 12px; height: 2px; background: var(--accent); }
.pc-result { margin-top: 28px; background: var(--dark); color: #fff; border-radius: 14px; padding: 22px 24px; }
.pc-result .pc-k { margin-top: 0; color: var(--accent-on-dark); }
.pc-result p { margin-top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.35; }
.pc-quote { margin: 24px 0 8px; }
.pc-quote blockquote { color: var(--ink); line-height: 1.6; }
.pc-quote figcaption { margin-top: 10px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.pc-visual { margin: 0; }
.pc-visual img { display: block; width: 100%; height: auto; border-radius: 18px; }

@media (max-width: 900px) {
  .pc { padding-block: 64px; }
  .pc-grid { grid-template-columns: 1fr; gap: 32px; }
  .pc-grid--rev .pc-copy { order: 0; }
  .pc-visual { order: -1; }
}
@media (max-width: 560px) {
  .pc-result { padding: 18px 20px; }
  .pc-result p { font-size: 1.05rem; }
}