/* An interlocking film mosaic: shared edges, one gutter, deliberate changes in scale. */
.work-view .projects{
  --puzzle-row:clamp(168px,16.5vw,244px);
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:var(--puzzle-row) var(--puzzle-row) calc(var(--puzzle-row)*1.4) repeat(4,var(--puzzle-row));
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}
.work-view-heading{margin-bottom:34px}
.work-view .projects>.project{margin:0;width:100%;height:100%;align-self:stretch;min-height:0}
.work-view .project-1{grid-area:1 / 1 / 3 / 9}
.work-view .project-2{grid-area:1 / 9 / 2 / 13}
.work-view .project-3{grid-area:2 / 9 / 3 / 13}
.work-view .project-4{grid-area:3 / 1 / 4 / 7}
.work-view .project-5{grid-area:3 / 7 / 4 / 13}
.work-view .project-6{grid-area:4 / 1 / 6 / 5}
.work-view .project-7{grid-area:4 / 5 / 5 / 13}
.work-view .project-8{grid-area:5 / 5 / 6 / 9}
.work-view .project-9{grid-area:5 / 9 / 6 / 13}
.work-view .project-10{grid-area:6 / 1 / 7 / 5}
.work-view .project-11{grid-area:6 / 5 / 8 / 13}
.work-view .project-12{grid-area:7 / 1 / 8 / 5}
.work-view .project-link{position:relative;width:100%;height:100%;border-radius:12px;isolation:isolate;text-align:left}
.work-view .project-image{width:100%;height:100%;aspect-ratio:auto;border-radius:12px;border-color:#ffffff0b;box-shadow:none;transform:none}
.work-view .project-image>img{object-fit:cover}
.work-view .project-link[aria-controls="portimao-motorsport-folder"] .project-image>img{object-position:50% 66%}
.work-view .project-link[aria-controls="europa-fm-folder"] .project-image>img{object-position:80% 44%}
.work-view .project-link[aria-controls="guillermo-h-folder"] .project-image>img{object-position:63% 50%}
.work-view .project-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,transparent 25%,#03060614 42%,#03060699 72%,#030606ed 100%)}
.work-view .project-info{position:absolute;inset:auto clamp(18px,2.1vw,30px) clamp(18px,2.1vw,30px);z-index:6;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:5px 14px;padding:0;pointer-events:none}
.work-view .project-name{font-size:clamp(21px,2vw,29px);font-weight:400;letter-spacing:-.035em;line-height:1.16;color:#f5f5f1;text-shadow:0 2px 14px #0009}
.work-view :is(.project-2,.project-3,.project-6,.project-8,.project-9,.project-10,.project-12) .project-name{font-size:clamp(20px,1.7vw,25px)}
.work-view .project-subtitle{font-size:13px;line-height:1.4;margin-top:5px;color:#d1d4ce}
.work-view .project-meta{font-size:12px;line-height:1.4;color:#b4bcb5}
.work-view .project-folder-mark{margin-top:3px;opacity:.6;transition:opacity .6s ease,transform .8s var(--ease)}
.work-view .project-link:is(:hover,:focus-visible) .project-folder-mark{opacity:1;transform:translate(2px,-2px)}
.work-view .project-link:hover .project-image{box-shadow:0 0 0 1px #dbe8df12}
.work-view .watch-film{display:none}
.work-view .project-brand-overlay{inset:0}
.work-view .project-link .project-info{opacity:1;transform:none;transition:opacity .35s ease}
.work-view .project-link::after{transition:opacity .45s ease}
.work-view .project-link.project-has-brand:focus-visible .project-info,
.work-view .project-link.project-has-brand:focus-visible::after{opacity:0}
@media(hover:hover) and (pointer:fine){
  .work-view .project-link.project-has-brand:hover .project-info,
  .work-view .project-link.project-has-brand:hover::after{opacity:0}
}
.person-name{white-space:nowrap}
.person-check{display:inline-block;width:.76em;height:.76em;margin-left:.28em;vertical-align:.01em;background:currentColor;-webkit-mask:url('assets/credits/person-check.svg') center/contain no-repeat;mask:url('assets/credits/person-check.svg') center/contain no-repeat}
.folder-credits .person-check{width:.9em;height:.9em;vertical-align:-.05em}
.project-person-signature{display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 32px);color:#f5f5f1;font-size:16px;font-weight:450;line-height:1.3;letter-spacing:-.015em;white-space:nowrap;text-shadow:0 2px 14px #0006}
.project-person-signature .person-check{width:14px;height:14px;margin:0;flex:none}
.project-person-signature .ink{background:none;-webkit-text-fill-color:currentColor}
.work-view .clients-projects{margin-top:70px}

/* A short pearl reflection travels along the actual rounded frame, never across the film. */
.project-edge{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible;opacity:.62;transition:opacity .8s ease}
.project-edge rect{fill:none;stroke:#f1eadd;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;animation:frame-reflection var(--edge-duration,18s) linear var(--edge-delay,0s) infinite;animation-play-state:paused}
.project-edge .edge-wake{stroke-width:2.5;stroke-dasharray:8 92;stroke-opacity:.055}
.project-edge .edge-tail{stroke-dasharray:5 95;stroke-opacity:.13}
.project-edge .edge-tip{stroke-dasharray:1.2 98.8;stroke-opacity:.48}
.project.edge-awake .project-edge rect{animation-play-state:running}
.work-view .project-link:is(:hover,:focus-visible) .project-edge{opacity:1}
.portal-arrival-view .project-edge rect{animation-play-state:paused}
@keyframes frame-reflection{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}


@media(min-width:701px) and (max-width:1099px){
  .work-view .projects{--puzzle-row:clamp(170px,18.3vw,202px);gap:16px;max-width:900px}
  .work-view .project-info{inset:auto 18px 18px;gap:4px 9px}
  .work-view .project-name{font-size:23px}
  .work-view :is(.project-2,.project-3,.project-6,.project-8,.project-9,.project-10,.project-12) .project-name{font-size:20px}
  .work-view .project-subtitle{font-size:12px}
  .work-view .project-meta{font-size:11px}
}
@media(max-width:700px){
  .project-person-signature{font-size:15px}
  .work-view-heading{margin-bottom:26px}
  .work-view .projects{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:14px;max-width:520px}
  .work-view .projects>.project{grid-area:auto;height:auto}
  .work-view .project-link{height:auto}
  .work-view .project-image{height:auto;aspect-ratio:4/3;border-radius:12px}
  .work-view :is(.project-1,.project-4,.project-8,.project-11) .project-image{aspect-ratio:16/10}
  .work-view .project-6 .project-image{aspect-ratio:4/5;max-height:500px}
  .work-view .project-info{inset:auto 18px 18px;gap:4px 10px}
  .work-view .projects .project-name{font-size:23px}
  .work-view .project-subtitle{font-size:12px;margin-top:4px}
  .work-view .project-meta{font-size:11px}
  .work-view .clients-projects{margin-top:44px}
  .project-edge{opacity:.52}
}
@media(prefers-reduced-motion:reduce){
  .project-edge{display:none}
  .work-view .project-folder-mark{transition:none;transform:none!important}
}