/* ===== PORTFOLIO: /portfolio/ hub and /portfolio/<slug>/ pages ===== */

/* hub grid of pg-site cards: 1 / 2 / 3 columns */
.pf-grid{display:grid;gap:clamp(18px,2.2vw,28px);grid-template-columns:1fr}
@media (min-width:640px){ .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pf-card .pg-site__b{display:flex;flex-direction:column;gap:6px;flex:1}
.pf-card__k{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A6618;line-height:1.35}
.pf-card .pg-site__t{font-size:1.15rem;line-height:1.2;margin:0}
.pf-card .pg-site__m{margin-top:auto;padding-top:4px}
.pf-card:focus-visible{outline:3px solid var(--gold-dk);outline-offset:3px}

/* detail: live preview in a browser frame */
.pf-prev{padding-top:clamp(40px,6vw,80px)}
.pf-frame{max-width:1180px;margin:0 auto;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(31,58,42,.1),0 40px 80px -40px rgba(31,58,42,.6)}
.pf-frame__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#EEF0EA;border-bottom:1px solid rgba(31,58,42,.1)}
.pf-frame__bar span{width:11px;height:11px;border-radius:50%;background:rgba(31,58,42,.22);flex:none}
.pf-frame__bar span:nth-child(1){background:#E26D5C}
.pf-frame__bar span:nth-child(2){background:var(--gold)}
.pf-frame__bar span:nth-child(3){background:#6B8F4E}
.pf-frame__bar b{flex:1;min-width:0;margin-left:10px;font-family:var(--head);font-weight:600;font-size:.78rem;color:var(--slate);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding-right:51px}
.pf-frame iframe{display:block;width:100%;aspect-ratio:16/10;border:0;background:#fff}
@media (max-width:639px){ .pf-frame iframe{aspect-ratio:9/14} .pf-frame__bar b{padding-right:0} }
.pf-prev__cta{justify-content:center;margin-top:clamp(24px,3vw,36px)}

/* detail: About This Build + Highlights */
.pf-body{display:grid;gap:clamp(32px,4.5vw,72px);grid-template-columns:1fr}
@media (min-width:861px){ .pf-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start} }
.pf-body .eyebrow{color:#8A6618;font-size:clamp(.88rem,1.15vw,1.02rem);letter-spacing:.15em;line-height:1.3;margin-bottom:16px}
.pf-body__desc{font-size:clamp(1.02rem,1.25vw,1.12rem);line-height:1.65;color:#3E4651;max-width:62ch}
.pf-body .pg-list li{font-size:.98rem}

/* detail: back link */
.pf-back{padding:clamp(36px,5vw,56px) 0;text-align:center}
.pf-back .pg-link{margin:0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.pf-back .pg-link:hover svg{transform:translateX(-3px)}