/* ==========================================================================
   Projects — BIG-style index: one project per row, a small tile + name +
   place on the left, a large image on the right. Filter bar on the far right.
   ========================================================================== */
:root {
  /* quiet, desaturated tones — distinct from each other but never louder than the work */
  --c-physical: #8b7d6e;   /* warm taupe — Physical Design */
  --c-uiux:     #5f6c7b;   /* slate — UI/UX */
  --c-eng:      #2b2b2b;   /* graphite — Engineering */
  --c-ai:       #a8a39a;   /* stone — AI */
  --bar-w: 10rem;
}
body.projects-page { overflow: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pj { padding: clamp(80px, 12vh, 120px) calc(var(--pad) + 76px) 160px; min-height: 100vh; }   /* room for the tile dock */

/* ---------- List ---------- */
.pj-list {
  list-style: none;
  width: 100%;
  display: flex; flex-direction: column;
  gap: 1.9vw;
}
.pj-item { transition: opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1); }
.pj-item.is-out { opacity: 0; transform: translateY(10px); }
.pj-item[hidden] { display: none; }

@property --iw { syntax: '<length>'; inherits: true; initial-value: 26.5vw; }
.pj-card {
  --iw: 26.5vw;                      /* image width — grows when the project opens */
  --padl: calc(var(--pad) + 76px);
  --side: calc((100vw - var(--iw)) / 2 - 2.2vw);   /* the image is always centred on the screen */
  display: grid;
  grid-template-columns: var(--side) var(--iw) max-content;
  column-gap: 2.2vw;
  margin: 0 calc(-1 * var(--padl));   /* full screen width: image centred, strip runs to the right edge */
  overflow: hidden;
  color: inherit; outline: none;
  scrollbar-width: none;
  transition: --iw 1s cubic-bezier(.77,0,.18,1);
}
.pj-card::-webkit-scrollbar { display: none; }
.pj-meta, .pj-image { cursor: pointer; }
.pj-item.is-open .pj-card { overflow-x: auto; overscroll-behavior-x: contain; padding-right: 4vw; }
.pj-card.is-dragging { user-select: none; }
.pj-card.is-dragging * { pointer-events: none; }
.pj-card:focus-visible .pj-image { outline: 1px solid var(--ink-3); outline-offset: 4px; }
.pj-image { grid-column: 2; grid-row: 1; }
.pj-strip { grid-column: 3; grid-row: 1; }
.pj-item.is-open .pj-card { --iw: 69.3vw; }   /* BIG's proportion: 69% of the screen */
.pj-item.is-open .pj-meta { padding-left: 16px; }
/* while a project is open the tiles simply fade away, and fade back when no open project is on screen */
@keyframes tileIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tileOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
body.projects-page .dock, body.projects-page .contact { animation: tileIn .5s ease both; }
body.projects-page.dock-away .dock, body.projects-page.dock-away .contact { animation: tileOut .35s ease forwards; pointer-events: none; }
body.dock-away .dock-edge { display: none; }

/* details (left) and description (right) unfold when open */
.pj-more, .pj-strip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s cubic-bezier(.77,0,.18,1); }
.pj-more > dl, .pj-strip > div { overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .8s cubic-bezier(.19,1,.22,1); }
.pj-item.is-open .pj-more, .pj-item.is-open .pj-strip { grid-template-rows: 1fr; }
.pj-item.is-open .pj-more > dl, .pj-item.is-open .pj-strip > div { opacity: 1; transform: none; transition-delay: .45s; }
.pj-facts { padding-top: 2.4vw; display: flex; flex-direction: column; gap: 0.9rem; }
.pj-facts dt { font-size: max(0.6875rem, 0.7vw); letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.pj-facts dd { margin-top: 0.15rem; font-size: max(0.8125rem, 0.85vw); letter-spacing: 0.02em; text-transform: uppercase; }
/* the strip, BIG-style: every image runs the full row height between the same two lines,
   text columns sit between them, and one gap (--g) is used everywhere */
.pj-card { --g: 4vw; --rh: calc(var(--iw) * 10 / 16); }
.pj-item.is-open .pj-strip { margin-left: calc(var(--g) - 2.2vw); }
.pj-strip-in { display: flex; gap: var(--g); align-items: stretch; }
.pj-text, .pj-note { width: max(17rem, 19vw); flex: none; }
.pj-cell { flex: none; height: var(--rh); margin: 0; }
.pj-shot { height: var(--rh); aspect-ratio: var(--r); background: var(--bg, #ededeb); overflow: hidden; }
.pj-shot img, .pj-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-shot.is-contain img { object-fit: contain; }
.pj-shot.is-round { border-radius: 8.4% / 3.9%; }   /* screen recordings: clip the square frame to the phone's own corners */
/* drawings, BIG-style: on the page's own white, centred in the row, with a caption underneath */
.pj-plate { flex: none; height: var(--rh); margin: 0; width: max(24vw, calc(var(--rh) * var(--ph, .62) * var(--r) + 4vw));
  display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pj-plate img { display: block; height: calc(var(--rh) * var(--ph, .62)); width: auto; max-width: 100%; object-fit: contain; }
.pj-plate figcaption { margin-top: 1.6rem; max-width: 100%; text-align: center; font-size: max(0.75rem, 0.74vw); line-height: 1.35; color: #1c1c1c; }
.pj-plate figcaption b { font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
/* text columns: a small label, then the story; process steps as a short list */
.pj-text h4 { margin: 2.2rem 0 1rem; font-size: max(0.6875rem, 0.7vw); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.pj-note h4 { margin-bottom: 1rem; font-size: max(0.6875rem, 0.7vw); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.pj-note dl { margin: 0; }
.pj-note dt + dd { margin-top: .2em; }
.pj-note dd + dt { margin-top: 1em; }
.pj-note p + dl { margin-top: 1.1em; }
.pj-note dt { font-size: max(0.875rem, 0.9vw); line-height: 1.4; color: #111; font-weight: 500; letter-spacing: -0.005em; }
.pj-note dd { margin-left: 0; font-size: max(0.875rem, 0.9vw); line-height: 1.5; letter-spacing: -0.005em; color: #3a3a3a; }
.pj-logo { display: block; width: min(100%, max(9rem, 11vw)); height: auto; margin-bottom: 2.2rem; }
.pj-text p, .pj-note p { font-size: max(0.875rem, 0.9vw); line-height: 1.5; letter-spacing: -0.005em; color: #1c1c1c; }
.pj-text p + p, .pj-note p + p { margin-top: 1.1em; }
/* a single larger statement, set in the middle of the row */
.pj-lead { flex: none; width: max(20rem, 27vw); margin: 0; display: flex; flex-direction: column; justify-content: center; }
.pj-lead p { font-size: max(1.25rem, 1.6vw); line-height: 1.3; letter-spacing: -0.015em; color: #111; }
.pj-lead cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: max(0.6875rem, 0.72vw); letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.pj-item.is-open .pj-name { font-size: max(1.0625rem, 1.2vw); }
.pj-item.is-open .pj-place { font-size: max(0.875rem, 0.95vw); }
.pj-name, .pj-place { transition: font-size .8s cubic-bezier(.77,0,.18,1); }

.pj-meta { grid-column: 1; grid-row: 1; padding-left: calc(var(--pad) + 76px); transition: padding-left .8s cubic-bezier(.77,0,.18,1); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

/* the project's own graphic: white geometry filling a black diamond, edge to edge */
.pj-mark {
  position: relative; width: max(54px, 3.5vw); height: max(54px, 3.5vw); margin-right: -0.4vw;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.pj-mark-sq {
  position: absolute; left: 14.645%; top: 14.645%; width: 70.71%; height: 70.71%;
  border-radius: 16%; overflow: hidden; background: #141414;
  transform: rotate(45deg); transform-origin: center;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.pj-mark svg { display: block; width: 100%; height: 100%; }

.pj-name { font-size: max(1.0625rem, 1.2vw); }
.pj-item.is-open .pj-place { font-size: max(0.875rem, 0.95vw); }
.pj-name, .pj-place { transition: font-size .8s cubic-bezier(.77,0,.18,1); }

.pj-meta { grid-column: 1; grid-row: 1; padding-left: calc(var(--pad) + 76px); transition: padding-left .8s cubic-bezier(.77,0,.18,1); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }


.pj-name { font-size: max(1.0625rem, 1.2vw); }
.pj-item.is-open .pj-place { font-size: max(0.875rem, 0.95vw); }
.pj-name, .pj-place { transition: font-size .8s cubic-bezier(.77,0,.18,1); }

.pj-meta { grid-column: 1; grid-row: 1; padding-left: calc(var(--pad) + 76px); transition: padding-left .8s cubic-bezier(.77,0,.18,1); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

/* the small tile: a rounded diamond with the discipline's symbol */
.pj-tiles { display: flex; gap: 6px; }
.pj-tile {
  position: relative;
  width: max(40px, 2.6vw); height: max(40px, 2.6vw);
  display: grid; place-items: center;
}
.pj-tiles .pj-tile:last-child { margin-right: -0.4vw; }   /* optical: the last diamond's point sits on the text edge */
.pj-tile { filter: drop-shadow(0 4px 10px rgba(0,0,0,.10)) drop-shadow(0 1px 2px rgba(0,0,0,.06)); }
.pj-tile::before {
  content: ""; position: absolute;
  width: 70%; height: 70%;
  border-radius: 16%;
  transform: rotate(45deg);
  background: #fff;                                   /* white, like the page tiles */
  box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--cat) 55%, transparent);   /* the discipline only as a hairline rim */
  transition: background .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.pj-symbol { position: relative; width: 36%; height: 36%; color: #141414; transition: color .4s ease; }
.pj-symbol svg { width: 100%; height: 100%; overflow: visible; display: block; }

.pj-name {
  margin-top: 1.05vw;
  font-size: max(0.9375rem, 0.95vw);
  font-weight: 400; letter-spacing: -0.005em; line-height: 1.3;
}
.pj-place {
  margin-top: 0.3vw;
  font-size: max(0.75rem, 0.78vw);
  font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a8a8a;
}

/* the image — or, until one is added, a quiet placeholder in the discipline's colour */
.pj-image {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: #ededeb;
}
.pj-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.pj-image .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: color-mix(in srgb, var(--cat) 55%, #f4f2ee);
}
.pj-image .ph svg { width: 18%; height: auto; }


/* load-in */
.pj-item { animation: rise 1s cubic-bezier(.19,1,.22,1) both; }
html.is-arriving .pj-item { animation: none !important; }

/* phone-screen projects: in the list the phone sits in a box as wide as every other project's image
   (only taller); opened, the box closes in on the phone so the screen fills it edge to edge */
@property --ih { syntax: '<length>'; inherits: true; initial-value: 26.5vw; }
.pj-item.is-tall .pj-card { --ih: 26.5vw; --rh: calc(69.3vw * 10 / 16); transition: --ih 1s cubic-bezier(.77,0,.18,1), --iw 1s cubic-bezier(.77,0,.18,1); }
.pj-item.is-tall.is-open .pj-card { --ih: calc(69.3vw * 10 / 16); --iw: calc(var(--ih) * var(--ar)); }
.pj-item.is-tall .pj-image {
  aspect-ratio: auto; height: var(--ih);
  padding: 0.9vw 0; background: #f1f1ef;
  transition: padding 1s cubic-bezier(.77,0,.18,1), background-color .6s ease;
}
.pj-item.is-tall .pj-image img { object-fit: contain; }
.pj-item.is-tall.is-open .pj-image { padding: 0; background-color: transparent; }
/* a pair of phones staggered to fill the box: they run off its top and bottom edges */
.pj-item.is-tall.is-bleed .pj-image { padding: 0; }
.pj-item.is-tall.is-bleed .pj-image img { object-fit: cover; }

/* wide screen recordings: the lead box takes the screen's own shape, same width as every other project; the strip row matches its height */
.pj-item.is-wide .pj-image { aspect-ratio: var(--ar); }
.pj-item.is-wide .pj-card { --rh: calc(var(--iw) / (var(--ar))); }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .pj { padding: 32px 16px 80px; }

  .pj-card { grid-template-columns: 1fr; row-gap: 1rem; --side: 0px; margin: 0; }
  .pj-image { grid-column: 1; }
  .pj-strip { grid-column: 1; grid-row: 3; }
  .pj-card { --rh: 62vw; }
  .pj-meta { grid-column: 1; grid-row: 2; padding-left: 0; text-align: left; align-items: flex-start; }
  .pj-mark { display: none; }
  .pj-name { margin-top: 0; }
  .pj-item.is-tall .pj-card { --rh: 62vw; }
  .pj-item.is-wide .pj-card { --rh: 52vw; }
  .pj-card { --g: 5vw; }
  .pj-item.is-open .pj-strip { margin-left: 0; }
  .pj-text, .pj-note { width: 72vw; }
  .pj-plate { width: 72vw; }
  .pj-lead { width: 78vw; }
  .pj-item.is-tall .pj-image, .pj-item.is-tall.is-open .pj-image { height: auto; aspect-ratio: 1; padding: 5vw 0; background: #f1f1ef; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-item { animation: none; }
  .pj-tile::before, .pj-symbol, .pj-image img, .pj-item { transition: none; }
}