/* Project pages in the Rietveld layout (with /wild.css): collage ground, scattered nav,
   case-study text on line-by-line white highlights, the work raw in a column beside it.
   Page markup (prerendered #sidebar-left, #canvas) is kept for scripts/prerender-projects.mjs;
   the old canvas chrome is hidden here and page.js moves the text into the layout. */

.topbar, .workspace, .inspector, .theme-toggle, .hud-hint{display:none !important}
.content{display:contents}

#proj{
    position:relative; z-index:2;
    /* text pinned left, the work gets the rest of the screen */
    display:grid; grid-template-columns:minmax(250px, 25vw) 1fr; column-gap:3vw;
    padding:104px 16px 140px 8px;
    align-items:start;
}

/* text column: sticks while the work scrolls past */
#proj .sidebar-left{
    position:sticky; top:104px; max-height:calc(100vh - 128px); overflow-y:auto; scrollbar-width:none;
    display:flex; flex-direction:column; gap:1.05em;
}
#proj .sidebar-left::-webkit-scrollbar{display:none}
.sidebar-section{display:flex; flex-direction:column; gap:.15em}
.sidebar-label, .sidebar-tags, .meta-row > span:first-child{font-size:.82em}
.sidebar-title{font-size:1em; font-weight:500; margin:0}
.meta-row{display:grid; grid-template-columns:7.2em 1fr; column-gap:.4em}
.sidebar-text{max-width:30em}

/* the work: raw, natural proportions, stacked */
.work{display:flex; flex-direction:column; gap:56px}
.work figure{margin:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.work img, .work video{display:block; width:auto; height:auto; max-width:100%; max-height:90vh; background:transparent}  /* natural size, never upscaled, never taller than the screen */
.work .frame{display:block; width:100%; height:auto}
.work video{background:#000}
.work .frame{position:relative; overflow:hidden; background:#000}
.work .frame iframe{position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none}
.work figcaption{font-size:.82em; max-width:34em}
.work .spin{animation:wild-spin var(--spin,8s) linear infinite}
@keyframes wild-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .work .spin{animation:none} }

@media (max-width:760px){
    #proj{display:block; margin:0; padding:96px 8px 120px}
    #proj .sidebar-left{position:static; max-height:none; overflow:visible; margin-bottom:28px}
}