.project-deck { position:relative; width:100%; color:#fff; background:var(--purple); }
.project-stage { position:relative; }
.projects-overview { display:flex; align-items:center; min-height:745px; padding:100px var(--gutter); background:var(--purple); --control-hover-fill:#fff; --control-hover-text:var(--ink); }
.projects-overview .section-inner { width:min(100%,1090px); display:grid; justify-items:center; gap:32px; text-align:center; }
.projects-overview h2 { margin:0; font-size:clamp(40px,4.44444vw,64px); font-weight:500; line-height:1.05; letter-spacing:-.02em; color:#fff; }
.project-overview-link { display:grid; place-items:center; width:48px; height:48px; color:inherit; text-decoration:none; }
.project-overview-link svg { width:32px; height:32px; transition:transform var(--motion-hover) var(--motion-ease); }
.project-overview-link:focus-visible { outline-color:var(--lime); }
.project-overview-link:focus-visible svg { transform:translateY(6px); }
/* Rounded on entry; the scroll controller closes the corners on landing. */
.project-panel { --project-arrow-rest:none; --project-arrow-hover:invert(1); position:relative; min-height:1220px; padding:0 var(--gutter); border-radius:var(--project-radius,20px); overflow:clip; color:var(--ink); background:#d8d0f6; }
.project-panel--dark { background:var(--ink); }
.project-panel--purple { background:var(--purple); }
.project-panel--dark, .project-panel--purple { --project-arrow-hover:none; --project-focus:var(--lime); color:var(--paper); }
.project-panel--dark .project-tag, .project-panel--purple .project-tag { color:var(--ink); background:var(--paper); }
.project-panel:focus-visible, .project-panel :focus-visible { outline-color:var(--project-focus,var(--purple)); }
.project-content { display:flex; flex-direction:column; gap:40px; width:100%; max-width:1312px; min-height:1220px; height:auto; margin:0 auto; padding:173px 0 210px; transform:translateY(var(--content-y,0px)); }
.project-visual { position:relative; flex:0 0 auto; width:100%; aspect-ratio:1312/682; overflow:hidden; border-radius:8px; background:#ddd; }
.project-visual img { position:absolute; display:block; width:100%; height:auto; max-width:none; left:0; top:-8.33%; }
.project-caption { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; }
.project-heading { min-width:0; max-width:452px; }
.project-title { margin:0; font-size:var(--card-title-size); font-weight:var(--card-title-weight); line-height:var(--card-title-line); letter-spacing:var(--card-title-tracking); }
.project-tag { display:table; width:max-content; max-width:100%; margin-top:17px; padding:6px 14px; border-radius:6px; background:var(--ink); color:var(--paper); font-size:16px; font-weight:500; line-height:1.2; letter-spacing:-.04em; text-transform:uppercase; }
.project-actions { display:grid; justify-items:start; gap:12px; flex:0 0 auto; }
.project-button { min-height:52px; padding:14px; gap:8px; font-size:20px; font-weight:500; line-height:1.2; letter-spacing:-.02em; }
.project-arrow { flex:0 0 auto; filter:var(--project-arrow-rest); transition:filter var(--motion-hover) var(--motion-ease); }
.project-button:focus-visible .project-arrow { filter:var(--project-arrow-hover); }
.project-url { display:inline-block; font-size:18px; font-weight:400; line-height:1.2; letter-spacing:-.04em; text-decoration:none; }
.project-deck.has-project-turns .project-stage { position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate; }
.project-deck.has-project-turns .projects-overview { min-height:0; height:100%; }
.project-deck.has-project-turns .project-panel { position:absolute; inset:0; min-height:0; height:100%; overflow:clip; transform-origin:0 100%; will-change:transform; }
@media (hover:hover) and (pointer:fine) { .project-button:hover .project-arrow { filter:var(--project-arrow-hover); } .project-overview-link:hover svg { transform:translateY(6px); } }
@media (max-width:900px) { .project-content { padding-block:120px 160px; } .project-heading { max-width:52%; } }
@media (max-width:600px) {
  .projects-overview { min-height:600px; padding-block:88px; }
  .projects-overview h2 { font-size:40px; }
  .project-overview-link { font-size:18px; }
  .project-panel { min-height:0; }
  .project-content { min-height:calc(100svh + 160px); padding-block:80px 100px; }
  .project-visual { aspect-ratio:1312/682; }
  .project-caption { flex-direction:column; gap:28px; }
  .project-heading { max-width:100%; }
  .project-actions { gap:12px; }
}
@media (prefers-reduced-motion:reduce), (max-height:619px) {
  .project-deck.has-project-turns { height:auto !important; }
  .project-deck.has-project-turns .project-stage { position:relative; height:auto; overflow:visible; }
  .project-deck.has-project-turns .project-panel { position:relative; inset:auto; height:auto; overflow:visible; transform:none !important; }
  .project-content { transform:none; }
}