/* A persistent project story alongside an uninterrupted image gallery. */
body.project-case-page { margin:0; background:#0d0c13; color:var(--cream); overflow-x:clip; font-family:var(--font-ui); }
body.project-case-page::before { display:none; }
body.project-case-page .topbar { background:linear-gradient(#0d0c13 15%,transparent); }
body.project-case-page main#topo.project-layout { display:grid; grid-template-columns:minmax(0, .86fr) minmax(0, 1.14fr); align-items:start; gap:clamp(32px,4vw,80px); width:100%; max-width:1920px; margin:0 auto; padding:120px clamp(24px,3vw,64px) 64px; overflow:visible; }
.project-copy-track { min-width:0; align-self:stretch; }
.project-copy { position:sticky; top:100px; min-width:0; padding:8px 0 12px; }
.project-back { display:inline-block; color:inherit; font-size:12px; text-decoration:none; border-bottom:1px solid transparent; padding:5px 0; margin-bottom:30px; }
.project-back:hover { border-color:currentColor; }
.project-eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:.14em; opacity:.62; margin:0 0 14px; }
.project-copy h1 { font-family:var(--font-fk); font-size:clamp(48px,5.7vw,110px); font-weight:700; letter-spacing:-.065em; line-height:.95; margin:0; }
.project-dot { color:#c6a2f5; }
.project-subtitle { margin:10px 0 28px; font-size:clamp(14px,1.3vw,20px); opacity:.65; }
.project-narrative { max-width:60ch; }
body.project-case-page section.project-story { background:none; border:0; box-shadow:none; border-radius:0; padding:0; min-height:0; margin:0 0 18px; backdrop-filter:none; }
.project-story h2 { font:500 10px/1.4 var(--font-ui); text-transform:uppercase; letter-spacing:.14em; margin:0 0 6px; color:#c6a2f5; }
.project-story p { font-size:clamp(13px,1.02vw,16px); line-height:1.6; margin:0; text-wrap:pretty; }
.project-narrative small { display:block; font-size:10px; line-height:1.5; opacity:.5; margin-top:-8px; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; padding:0; list-style:none; margin:24px 0 0; }
.project-tags li { border:1px solid #fff6d655; border-radius:5px; padding:4px 8px; font:11px/1.2 var(--font-ui); text-transform:uppercase; }
.project-finale { grid-column:1 / -1; min-width:0; text-align:center; }
.project-talk { display:inline-block; max-width:100%; padding:12px 8px; color:var(--cream); background:transparent; border:0; text-decoration:none; font-family:var(--font-kicker); font-weight:400; font-size:clamp(28px,8.5vw,164px); line-height:1.15; letter-spacing:-.022em; text-transform:uppercase; }
.project-talk__text { display:block; overflow:hidden; }
.project-talk__word { display:inline-block; white-space:nowrap; }
.project-talk__letter { display:inline-block; overflow:hidden; vertical-align:bottom; }
.project-talk__glyph { display:block; }
/* Keep the entrance on the wrapper; only the glyph moves on hover. */
@media (hover:hover) and (pointer:fine) {
 .project-talk:hover .project-talk__glyph { animation:project-talk-swap 1.3s cubic-bezier(.45,0,.25,1) both; animation-delay:calc(var(--i) * 22ms); }
}
.project-talk:focus-visible .project-talk__glyph { animation:project-talk-swap 1.3s cubic-bezier(.45,0,.25,1) both; animation-delay:calc(var(--i) * 22ms); }
@keyframes project-talk-swap {
 0% { transform:translateY(0); opacity:1; }
 50% { transform:translateY(110%); opacity:0; }
 100% { transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
 .project-talk:hover .project-talk__glyph,.project-talk:focus-visible .project-talk__glyph { animation:none; }
}
.project-talk:focus-visible,.project-back:focus-visible { outline:2px solid #c6a2f5; outline-offset:6px; }
.project-gallery { min-width:0; display:grid; gap:0; }
.project-gallery__item { margin:0; width:100%; }
.project-gallery__item img,
.project-gallery__item video { display:block; width:100%; height:auto; border-radius:0; }
.project-gallery__closing { padding:56px 24px 20px; text-align:center; }
.project-gallery__closing p { font-size:18px; opacity:.65; }
@media(min-width:961px) and (max-height:850px) {
 .project-copy { top:84px; }
 .project-back { margin-bottom:12px; }
 .project-eyebrow { margin-bottom:10px; }
 .project-subtitle { margin-bottom:18px; }
 body.project-case-page section.project-story { margin-bottom:12px; }
 .project-story p { font-size:12px; line-height:1.5; }
 .project-tags { margin-top:16px; }
}
@media(min-width:961px) and (max-height:650px) { .project-copy { position:static; } }
@media(min-width:1600px) { .project-copy { top:96px; } }
@media(max-width:960px) {
 body.project-case-page main#topo.project-layout { grid-template-columns:1fr; padding:112px 24px 40px; gap:44px; }
 .project-copy { position:static; max-width:680px; width:100%; margin:auto; }
 .project-copy h1 { font-size:clamp(52px,11vw,96px); }
 .project-story p { font-size:15px; }
 .project-narrative { max-width:none; }
 .project-back { margin-bottom:24px; }
}

/* Reveal the project on entry without hiding content behind a JS dependency. */
@media (prefers-reduced-motion: no-preference) {
 .project-back,
 .project-eyebrow,
 .project-copy h1,
 .project-subtitle,
 .project-story,
 .project-narrative > small,
 .project-tags {
  animation: project-info-enter 1.15s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--project-enter-delay, 0s);
 }
 .project-back { --project-enter-delay: .04s; }
 .project-eyebrow { --project-enter-delay: .1s; }
 .project-copy h1 { --project-enter-delay: .18s; }
 .project-subtitle { --project-enter-delay: .26s; }
 .project-story:nth-child(1) { --project-enter-delay: .34s; }
 .project-story:nth-child(2) { --project-enter-delay: .44s; }
 .project-story:nth-child(3) { --project-enter-delay: .54s; }
 .project-narrative > small { --project-enter-delay: .6s; }
 .project-tags { --project-enter-delay: .66s; }
 .project-gallery {
  animation: project-image-enter 1.4s cubic-bezier(.16,1,.3,1) .18s backwards;
 }
 /* Keyboard navigation should never focus an invisible link. */
 .project-back:focus-visible { animation: none; }
}
@keyframes project-info-enter {
 from { opacity:0; transform:translate3d(0,22px,0); filter:blur(3px); }
 to { transform:translate3d(0,0,0); filter:blur(0); }
}
@keyframes project-image-enter {
 from { opacity:0; transform:translate3d(0,28px,0) scale(.985); }
 to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}