/* Static portfolio collections and project galleries */
.portfolio-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; color:var(--muted); font-size:14px; }
.portfolio-breadcrumb a { color:var(--cyan-light); text-decoration:none; }
.portfolio-breadcrumb a:hover { text-decoration:underline; }
.collection-page, .case-page { width:min(1320px,100%); margin:0 auto; padding:42px 24px 100px; }
.collection-header { display:flex; align-items:end; justify-content:space-between; gap:32px; margin:0 0 35px; padding:0 0 28px; border-bottom:1px solid var(--line); }
.collection-label, .project-category { margin:0 0 10px; color:var(--cyan-light); font:700 14px/1.3 'Space Grotesk',sans-serif; }
.collection-header h1 { margin:0 0 10px; font-size:clamp(45px,6vw,76px); letter-spacing:-.045em; }
.collection-header p:last-child { max-width:640px; margin:0; color:var(--text-soft); font-size:19px; }
.collection-switch, .collection-end a, .case-close a { display:inline-flex; align-items:center; justify-content:center; flex:none; padding:10px 16px; border:1px solid var(--cyan); border-radius:11px; background:rgba(54,205,210,.08); color:var(--cyan-light); font-weight:700; text-decoration:none; }
.collection-switch:hover, .collection-end a:hover, .case-close a:hover { background:rgba(54,205,210,.18); }
.project-list { display:grid; gap:18px; }
.project-row { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--night-soft); }
.project-row:hover,.project-row:focus-within { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(54,205,210,.25); }
.project-preview { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:4px; height:clamp(285px,27vw,320px); padding:4px; background:#090a25; text-decoration:none; }
.project-preview.solo { display:block; }
.project-preview img { width:100%; height:100%; min-height:0; object-fit:contain; background:#11102a; }
.project-preview img:first-child { grid-row:1/3; }
.background-preview { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; }
.background-preview-panel { position:relative; display:block; min-width:0; min-height:0; overflow:hidden; background:#11102a; }
.background-preview-panel img { width:100%; height:100%; object-fit:contain; }
.background-preview-panel strong { position:absolute; left:12px; bottom:12px; padding:5px 9px; border:1px solid var(--cyan); border-radius:8px; background:rgba(8,11,36,.9); color:var(--cyan-light); font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.05em; }
.mascot-preview { height:clamp(235px,23vw,270px); align-self:center; }
.mascot-preview img { object-fit:contain; padding:10px; }
.project-row-copy { display:flex; flex-direction:column; align-items:flex-start; padding:24px 28px; }
.project-row-copy h2 { max-width:18ch; margin:0 0 12px; font-size:clamp(27px,2.6vw,34px); letter-spacing:-.035em; }
.project-row-copy h2 a { text-decoration:none; }
.project-row-copy h2 a:hover { color:var(--gold); }
.project-summary { display:-webkit-box; max-width:58ch; margin:0 0 12px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:var(--text-soft); font-size:15px; line-height:1.45; }
.project-tools { margin:0; color:var(--text-soft); font-size:14px; }
.project-tools span { margin-right:12px; color:var(--cyan-light); font-weight:700; }
.project-open { display:flex; align-items:center; justify-content:space-between; gap:25px; min-width:220px; margin-top:auto; padding:9px 0 0; border-top:1px solid var(--line); color:var(--gold); font:700 15px 'Space Grotesk',sans-serif; text-decoration:none; }
.project-open span { color:var(--muted); font:500 12px 'IBM Plex Sans',sans-serif; white-space:nowrap; }
.project-open:hover { color:#fff0b3; }
.collection-end { display:flex; flex-wrap:wrap; gap:12px; margin:44px 0 0; }
.case-header { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:42px; align-items:end; margin:0 0 28px; padding:0 0 28px; border-bottom:1px solid var(--line); }
.case-header h1 { max-width:14ch; margin:0; font-size:clamp(38px,5.5vw,72px); letter-spacing:-.045em; }
.case-intro > p:first-child { max-width:58ch; margin:0 0 22px; color:var(--text-soft); font-size:17px; line-height:1.65; }
.client-review { margin:0 0 30px; padding:24px 28px; border:1px solid var(--line); border-left:4px solid var(--cyan); border-radius:var(--radius); background:var(--night-soft); }
.client-review h2 { margin:0 0 14px; color:var(--cyan-light); font:700 14px/1.3 'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.client-review blockquote { max-width:85ch; margin:0; color:var(--text); font-size:16px; line-height:1.6; }
.client-review blockquote p { margin:0 0 12px; }
.client-review blockquote p:last-child { margin-bottom:0; }
.client-review-credit { margin:16px 0 0; color:var(--gold); font:700 14px/1.3 'Space Grotesk',sans-serif; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.gallery-section-title { grid-column:1/-1; margin:25px 0 0; padding-top:22px; border-top:1px solid var(--line); color:var(--gold); font:700 clamp(25px,3vw,34px) 'Space Grotesk',sans-serif; }
.gallery-section-title.first { margin-top:0; padding-top:0; border-top:0; }
.project-art { display:grid; place-items:center; min-width:0; min-height:320px; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#0c0b23; }
.project-art:hover,.project-art:focus-within { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(54,205,210,.25); }
.project-art:not(.project-video) { display:flex; flex-direction:column; }
.project-art.featured { grid-column:1/-1; min-height:520px; }
.project-art-open { display:grid; place-items:center; flex:1; width:100%; min-height:320px; padding:18px; border:0; background:none; color:inherit; cursor:zoom-in; }
.project-art-title { width:100%; margin:0; padding:10px 16px; border-top:1px solid var(--line); color:var(--cyan-light); font:700 14px/1.3 'Space Grotesk',sans-serif; }
.project-art img { display:block; width:auto; height:auto; max-width:100%; max-height:540px; object-fit:contain; }
.project-art.featured img { max-height:min(74vh,900px); }
.project-art.sprite-art, .project-art.sprite-art .project-art-open { min-height:240px; }
.project-art.sprite-art img { width:min(50%,200px); max-height:200px; }
.project-art img.pixel-art { image-rendering:pixelated; }
.project-art-open:hover img { filter:brightness(1.1); }
.project-preview img,.project-art img,.gallery-viewer img { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.gallery-viewer { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:60px 24px 22px; background:rgba(2,3,20,.97); }
.gallery-viewer[hidden] { display:none; }
.gallery-viewer-close,.gallery-viewer-arrow,.gallery-viewer-zoom { border:1px solid var(--line); border-radius:10px; background:var(--plum); color:var(--text); font:700 15px 'Space Grotesk',sans-serif; cursor:pointer; }
.gallery-viewer-close:hover,.gallery-viewer-arrow:hover,.gallery-viewer-zoom:hover { border-color:var(--cyan); }
.gallery-viewer-close { position:absolute; top:15px; right:20px; padding:10px 14px; }
.gallery-viewer-layout { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:14px; align-items:center; width:min(100%,1300px); height:min(78vh,900px); margin:0 auto; }
.gallery-viewer-arrow { width:48px; height:56px; }
.gallery-viewer-stage { display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#0c0b23; }
.gallery-viewer-stage img { max-width:100%; max-height:100%; object-fit:contain; transform:scale(1); transition:transform .2s ease; }
.gallery-viewer-stage img.pixel-art { image-rendering:pixelated; }
.gallery-viewer.is-zoomed .gallery-viewer-stage img { transform:scale(1.18); }
.gallery-viewer-controls { display:flex; align-items:center; justify-content:center; gap:20px; color:var(--text-soft); font-size:14px; }
.gallery-viewer-title { color:var(--cyan-light); font:700 15px 'Space Grotesk',sans-serif; }
.gallery-viewer-zoom { min-width:84px; padding:9px 12px; }
.project-video { padding:18px; }
.project-video video { display:block; width:100%; max-height:540px; }
.project-video figcaption { margin-top:10px; }
.case-close { margin:36px 0; }
.case-neighbors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding-top:25px; border-top:1px solid var(--line); }
.case-neighbors a { display:grid; gap:6px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--night-soft); text-decoration:none; }
.case-neighbors a:hover,.case-neighbors a:focus-visible { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(54,205,210,.25); }
.case-neighbors a span { color:var(--cyan-light); font-size:13px; }
.case-neighbors a strong { font:700 20px/1.2 'Space Grotesk',sans-serif; }
@media (max-width:900px) {
  .project-row { grid-template-columns:1fr; }
  .project-preview { height:290px; }
  .mascot-preview { height:250px; }
  .project-row-copy { min-height:0; }
  .case-header { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:600px) {
  .collection-page, .case-page { padding:26px 16px 70px; }
  .collection-header { align-items:flex-start; flex-direction:column; gap:18px; }
  .collection-header h1 { font-size:clamp(38px,11vw,56px); }
  .collection-header p:last-child { font-size:16px; }
  .project-list { gap:18px; }
  .project-preview { height:230px; }
  .mascot-preview { height:210px; }
  .project-row-copy { padding:20px; }
  .project-row-copy h2 { max-width:none; font-size:27px; }
  .project-open { width:100%; margin-top:22px; }
  .case-header h1 { max-width:none; font-size:clamp(34px,10vw,52px); }
  .client-review { padding:20px; }
  .case-gallery { grid-template-columns:1fr; gap:10px; }
  .project-art, .project-art.featured { grid-column:auto; min-height:260px; }
  .project-art-open { min-height:260px; padding:12px; }
  .project-art img, .project-art.featured img { max-height:70vh; }
  .gallery-viewer { padding:58px 10px 16px; }
  .gallery-viewer-layout { grid-template-columns:34px minmax(0,1fr) 34px; gap:5px; height:min(68vh,700px); }
  .gallery-viewer-arrow { width:34px; height:46px; }
  .gallery-viewer-close { right:10px; }
  .case-neighbors a { padding:14px; }
  .case-neighbors a strong { font-size:16px; }
}