/* Projects index v2 (2026-09-08). Same markup as v1; desktop rebuilt as flow
   layout. Tablet and mobile blocks are carried over below. */
.ptsb-projects-page { background: var(--ptsb-precision-cream); font-size: 16px; line-height: 1.5; }
.ptsb-project-index { padding: 88px 0 var(--ptsb-precision-section); }
.ptsb-project-index__layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 70px; align-items: start; }
.ptsb-project-index__filters { position: sticky; top: 40px; width: 200px; }
.ptsb-project-index__filter-scroller { display: grid; gap: 18px; }
.ptsb-project-index__filters button { position: relative; width: max-content; min-width: 0; padding: 0 0 6px; border: 0; background: transparent; color: var(--ptsb-precision-grey); cursor: pointer; font-family: var(--ptsb-precision-display); font-size: 24px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; text-align: left; transition: color .18s ease; }
.ptsb-project-index__filters button:hover,
.ptsb-project-index__filters button.is-active,
.ptsb-project-index__filters button[aria-pressed="true"] { color: var(--ptsb-precision-charcoal); }
.ptsb-project-index__filters button::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; content: ""; opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity .18s ease, transform .18s ease; }
.ptsb-project-index__filters button.is-active::after,
.ptsb-project-index__filters button[aria-pressed="true"]::after { opacity: 1; transform: scaleX(1); }
.ptsb-project-index__filters button:focus-visible { outline: 2px solid var(--ptsb-precision-action); outline-offset: 5px; }
.ptsb-project-index__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 37px; }
/* Part-published: three projects as a showcase, not an index with nine missing.
   The filter rail is gone, and so is its column - keeping a 200px hole on the
   left read as a layout fault. The cards run three across the full rail, and
   the page opens the way every other page does: eyebrow, title, lede. Type
   sizes follow .ptsb-home-section-heading so the opening is the site's, not
   this page's own. */
.ptsb-project-index__layout--part { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
.ptsb-project-index__layout--part .ptsb-project-index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 37px; }
.ptsb-project-index__intro { max-width: 760px; }
.ptsb-project-index__eyebrow { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.ptsb-project-index__intro h1 { margin: 20px 0 0; font-family: var(--ptsb-precision-display); font-size: 56px; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.ptsb-project-index__lede { max-width: 640px; margin: 28px 0 0; font-size: 18px; line-height: 1.5; }
.ptsb-project-card { min-width: 0; }
.ptsb-project-card[hidden] { display: none; }
.ptsb-project-card__media { display: block; width: 100%; aspect-ratio: 432 / 312; border-radius: var(--ptsb-precision-radius-md); color: inherit; text-decoration: none; }
.ptsb-project-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* anchor only - see the note in home.css; the wrapper is a div once the detail
   pages are closed, and it must not behave like something you can open. */
a.ptsb-project-card__media:hover > img,
a.ptsb-project-card__media:focus-visible > img { transform: scale(1.03); }
.ptsb-project-card__missing { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #c5cbd0, #9aa8b4); }
.ptsb-project-card__meta { padding-top: 22px; }
.ptsb-project-card__meta--uncategorised h2 { margin-top: 0; }
.ptsb-project-card .ptsb-precision-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptsb-project-card h2 { max-width: 100%; margin: 16px 0 0; font-family: var(--ptsb-precision-display); font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.ptsb-project-card h2 a { color: inherit; text-decoration: none; }
.ptsb-project-card h2 a:hover,
.ptsb-project-card h2 a:focus-visible { color: var(--ptsb-precision-action); text-decoration: underline; text-underline-offset: 5px; }
.ptsb-project-index__empty { grid-column: 1 / -1; margin: 0; font-size: 18px; line-height: 1.4; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ===== v2 responsive (2026-09-08): fluid below the 1600 anchor, stacked below 768.
   Written against the v2 desktop base; the v1 frozen mobile frames are not used. ===== */
@media (max-width: 1199px) {
  .ptsb-project-index__layout { grid-template-columns: 160px minmax(0, 1fr); column-gap: 40px; }
  .ptsb-project-index__layout--part { grid-template-columns: minmax(0, 1fr); }
  .ptsb-project-index__layout--part .ptsb-project-index__grid { gap: 40px 28px; }
  .ptsb-project-index__filters { width: 160px; }
}

@media (max-width: 767px) {
  .ptsb-projects-page { font-size: 16px; }
  /* 72 top like every other section on the site; it was the only one at 48. */
  .ptsb-project-index { padding: 72px 0; }
  .ptsb-project-index__layout { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .ptsb-project-index__layout--part { row-gap: 40px; }
  .ptsb-project-index__layout--part .ptsb-project-index__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ptsb-project-index__intro h1 { margin-top: 14px; font-size: 32px; line-height: 1.08; }
  .ptsb-project-index__lede { margin-top: 18px; font-size: 16px; }
  .ptsb-project-index__filters { position: static; width: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ptsb-project-index__filters::-webkit-scrollbar { display: none; }
  .ptsb-project-index__filter-scroller { display: flex; width: max-content; gap: 24px; }
  /* 22px of text plus the 6px the underline sits in made these 28px tall - a
     row of small targets in a horizontal scroller, which is the hardest kind to
     hit. Vertical padding takes them to 44px without moving the text, and the
     underline moves with it so it still sits under the word. */
  .ptsb-project-index__filters button { padding: 11px 0; font-size: 20px; }
  .ptsb-project-index__filters button::after { bottom: 11px; }
  .ptsb-project-index__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ptsb-project-card__meta { padding-top: 16px; }
  .ptsb-project-card h2 { margin-top: 12px; font-size: 20px; }
}