/* ==========================================================================
   Portfolio — page-specific styles (03 — Portfolio, node 189:475)
   Reuses main.css tokens, .container, .cta-band, .testimonials, reveals.
   ========================================================================== */

/* ---------------------------------------------------------------- Header */
.pf-header{ background:var(--paper); padding:100px 0 48px; }
.pf-header__inner{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.pf-header__title{
  font-family:var(--font-serif); font-weight:300; color:var(--ink);
  font-size:79px; line-height:1.04;
}
.pf-header__lede{
  font-family:var(--font-sans); font-weight:300; color:var(--text-soft);
  font-size:18px; line-height:1.6; max-width:640px;
}

/* ---------------------------------------------------------------- Filters */
.pf-filters{ background:var(--paper); padding:0 0 48px; }
.pf-filters__row{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.pf-filter{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-sans); font-weight:400; font-size:14px;
  letter-spacing:.5px; color:var(--muted); white-space:nowrap;
  transition:color .2s ease;
}
.pf-filter:hover{ color:var(--ink); }
.pf-filter.is-active{ font-weight:500; color:var(--ink); }
/* 2026-11-10: the filters are links now (they work without JavaScript). Same look as before; the
   padding/negative margin only enlarges the tap area, and keyboard focus gets a visible ring. */
.pf-filter{ display:inline-block; padding:8px 0; margin:-8px 0; line-height:1.45; border-radius:2px; }
.pf-filter:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; color:var(--ink); }
.pf-filters{ scroll-margin-top:24px; }

/* ---------------------------------------------------------------- Project grid */
.pf-grid-section{ background:var(--paper-2); padding:0 0 120px; }
.pf-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:40px; row-gap:80px;
}
.pf-card{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.pf-card__img{ width:100%; border-radius:var(--radius-img); overflow:hidden; }
.pf-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pf-card:hover .pf-card__img img{ transform:scale(1.03); }

/* alternating image heights from Figma */
.pf-card--tall .pf-card__img{ height:520px; }
.pf-card--standard .pf-card__img{ height:420px; }
.pf-card--medium .pf-card__img{ height:460px; }

.pf-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pf-card__text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.pf-card__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink); font-size:28px; line-height:1; }
.pf-card__sub{ font-family:var(--font-sans); font-weight:400; color:var(--muted); font-size:13px; letter-spacing:.5px; }
.pf-card__arrow{ font-family:var(--font-sans); color:var(--ink); font-size:20px; flex-shrink:0; transition:transform .2s ease; }
.pf-card:hover .pf-card__arrow{ transform:translateX(6px); }

/* hidden by filter */
.pf-card.is-hidden{ display:none; }

/* 2026-11-10: a project with no image yet — a plain panel in the card's own proportions */
.pf-card__img--empty{ background:var(--paper-3); border:1px solid var(--line); }

/* 2026-11-10: filter result announcement (assistive technology only) and the "no projects" state */
.pf-status{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.pf-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding:56px 0 24px; border-top:1px solid var(--line); }
.pf-empty[hidden]{ display:none; }
.pf-empty__text{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:34px; line-height:1.25; max-width:760px; }
.pf-empty__reset:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width:900px){
  .pf-header{ padding:72px 0 36px; }
  .pf-header__title{ font-size:48px; }
  .pf-header__lede{ font-size:16px; }
  .pf-filters__row{ gap:18px; }
  .pf-grid{ grid-template-columns:1fr; row-gap:48px; }
  .pf-card--tall .pf-card__img,
  .pf-card--standard .pf-card__img,
  .pf-card--medium .pf-card__img{ height:300px; }
  .pf-card__name{ font-size:24px; }
  .pf-empty{ padding:40px 0 8px; }
  .pf-empty__text{ font-size:26px; }
}
@media (max-width:560px){
  .pf-header__title{ font-size:38px; }
  .pf-filters__row{ gap:14px; }
  .pf-filter{ font-size:13px; }
}