/* One continuous strip of project covers. */
.shell[data-view="projects"] .page-intro{padding-bottom:42px}
.project-reel{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:28px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 0 26px;min-width:0;-webkit-overflow-scrolling:touch}
.project-reel::-webkit-scrollbar{display:none;width:0;height:0}
.project-reel:focus-visible{outline:none}
.project-reel:focus-visible .project-focus-caption p{text-decoration:underline;text-underline-offset:4px}
.project-slide{min-width:0;scroll-snap-align:start}
.project-focus-cover{display:flex;align-items:end;position:relative;aspect-ratio:1.5;padding:clamp(26px,3.2vw,48px);background:#e3e2db;color:var(--ink);box-sizing:border-box;overflow:hidden}
.project-focus-cover h2{font:600 clamp(68px,8.6vw,132px)/.88 Grotesk,Arial,sans-serif;letter-spacing:-.075em;margin:0}
.project-focus-cover:focus-visible{outline:none}
.project-focus-cover:focus-visible h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.project-focus-caption{display:flex;justify-content:space-between;gap:28px;padding-top:20px;align-items:baseline}
.project-focus-caption p{font:400 16px/1.45 Grotesk,Arial,sans-serif;letter-spacing:-.015em;margin:0;max-width:32ch}
.project-focus-caption>span{color:var(--mute);font-size:12px;white-space:nowrap}
@media(max-width:850px){
 .project-reel{grid-auto-columns:82%;gap:22px}
 .project-focus-cover{aspect-ratio:1.2}
 .project-focus-cover h2{font-size:clamp(64px,10vw,100px)}
 .project-focus-caption{gap:16px}
}
@media(max-width:600px){
 .shell[data-view="projects"] .page-intro{padding-bottom:28px}
 .project-reel{grid-auto-columns:86%;gap:16px;padding-bottom:22px}
 .project-focus-cover{aspect-ratio:1;min-height:0;padding:24px}
 .project-focus-cover h2{font-size:clamp(58px,18vw,86px)}
 .project-focus-caption{gap:14px;padding-top:18px}
 .project-focus-caption p{font-size:14px;max-width:22ch}
 .project-focus-caption>span{font-size:11px}
}

.project-title-line{display:block;transform-origin:0 85%;transform:translate3d(var(--project-lag,0px),0,0) skewX(var(--project-lean,0deg));will-change:auto}
.project-title-line:nth-child(2){transform:translate3d(calc(var(--project-lag,0px)*1.35),0,0) skewX(calc(var(--project-lean,0deg)*.7))}
.project-reel.is-moving .project-title-line{will-change:transform}
@media(prefers-reduced-motion:reduce){.project-title-line,.project-title-line:nth-child(2){transform:none!important}}

/* Projects occupies one viewport; only the reel can scroll. */
body.projects-page{height:100dvh;overflow:hidden;overscroll-behavior-y:none}
#shell[data-view="projects"]{height:100dvh;display:flex;flex-direction:column}
#shell[data-view="projects"]>.masthead,#shell[data-view="projects"]>footer{display:none}
body.projects-page #main{flex:1;min-height:0;height:100%;padding-top:48px;padding-bottom:24px}
#shell[data-view="projects"] #main>.view{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
#shell[data-view="projects"] .page-intro{position:relative;top:auto;min-height:0;padding-bottom:clamp(18px,4dvh,36px)}
#shell[data-view="projects"] .project-reel{height:100%;min-height:0;padding-bottom:0;touch-action:pan-x pinch-zoom;overscroll-behavior-y:none}
#shell[data-view="projects"] .project-slide{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
#shell[data-view="projects"] .project-focus-cover{height:100%;min-height:0;aspect-ratio:auto;container-type:size;padding:clamp(20px,3.5dvh,40px)}
#shell[data-view="projects"] .project-focus-cover h2{font-size:min(clamp(68px,8.6vw,132px),40cqh)}
#shell[data-view="projects"] .project-focus-caption{padding-top:16px}
@media(max-width:600px){
 body.projects-page{display:flex;flex-direction:column}
 body.projects-page>.rail{flex:none}
 body.projects-page>#shell[data-view="projects"]{flex:1;height:auto;min-height:0}
 body.projects-page #main{padding-top:24px;padding-bottom:22px}
 #shell[data-view="projects"] .page-intro{padding-bottom:24px}
 #shell[data-view="projects"] .project-focus-cover h2{font-size:min(clamp(58px,18vw,86px),40cqh)}
}

/* The supplied Token Bank artwork carries from the reel into its full page. */
.project-token-bank{background:#1c2329;color:#f4f1ea;isolation:isolate}
.project-token-bank>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1}
.project-token-bank h2{position:relative}
.project-detail-content.project-image-cover .detail-hero{background:#1c2329;color:#f4f1ea}
.project-detail-content.project-image-cover .detail-nav:not(.on-paper) a,
.project-detail-content.project-image-cover .detail-nav:not(.on-paper) [data-detail-back]{color:#f4f1ea}
.project-image-cover .detail-hero-image{object-position:center}

.project-ai-glasses{background:#e9e3d5;color:#171715;isolation:isolate}
.project-ai-glasses>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1}
.project-focus-cover.project-ai-glasses h2{font-size:clamp(28px,4.2vw,64px);line-height:1;letter-spacing:-.06em;position:relative}
#shell[data-view="projects"] .project-focus-cover.project-ai-glasses h2,.home-story-mode .home-build .project-focus-cover.project-ai-glasses h2{font-size:min(clamp(28px,4.2vw,64px),25cqh)}
.project-detail-content.project-light-cover .detail-hero{background:#e9e3d5;color:#171715}
.project-detail-content.project-light-cover .detail-nav:not(.on-paper) a,
.project-detail-content.project-light-cover .detail-nav:not(.on-paper) [data-detail-back]{color:#171715}
#event-page.project-page [data-project-id="ai-glasses"] h1{font-size:clamp(44px,7.6vw,112px);line-height:1;letter-spacing:-.06em}

/* Project previews are single-screen covers until more content is ready. */
#event-page.project-page{overflow:hidden;touch-action:none}
.project-detail-content{height:100dvh;min-height:0;overflow:hidden}
.project-detail-content .detail-hero{height:100dvh;min-height:0;padding-top:min(120px,20dvh)}
#event-page.project-page h1{font-size:min(clamp(80px,13vw,190px),24dvh)}
#event-page.project-page [data-project-id="ai-glasses"] h1{font-size:min(clamp(44px,7.6vw,112px),18dvh)}
@media(max-width:600px){#event-page.project-page h1{font-size:min(clamp(62px,22vw,110px),24dvh)}}

/* Keep the full project name within the original cover typography. */
.project-name-context{display:block;font-size:.22em;letter-spacing:-.025em;line-height:1.2;margin-bottom:.5em}
#event-page.project-page [data-project-id="token-bank"] h1{font-size:min(clamp(48px,7.4vw,112px),18dvh);line-height:1;letter-spacing:-.05em}

.project-caption-token{flex-wrap:wrap;gap:8px 24px}
.project-caption-token p{flex:1 1 240px;max-width:42ch}
.project-caption-token>span{font-size:14px}
.project-launch-copy{margin-top:24px;max-width:39ch}
.project-launch-copy p{font:400 clamp(17px,1.8vw,24px)/1.45 Grotesk,Arial,sans-serif;margin:0}
.project-launch-copy>span{display:block;font:400 clamp(14px,1.2vw,17px)/1.4 Grotesk,Arial,sans-serif;margin-top:16px;color:#cfcec7}
@media(max-width:600px){
 .project-caption-token p{flex-basis:100%;max-width:32ch}
 .project-caption-token>span{font-size:12px}
 .project-launch-copy{margin-top:20px;max-width:30ch}
 .project-launch-copy>span{margin-top:12px}
}