/* Side project pages (Ocean Up Close, Cube Runner, the AI tools, plugins…). Loaded after site.css and case.css.
   One centred column like the case studies; embeds and media can break out wider (.proj-wide). */
.proj-page { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 110px)); padding-bottom: var(--space-section-md); }
.proj-col { max-width: 760px; margin-inline: auto; }
.proj-back { display: block; width: fit-content; margin-bottom: clamp(22px, 3vh, 34px); color: var(--muted); text-decoration: none; }
.proj-back:hover { color: var(--ink); }
.proj-page .h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.proj-page .lead { margin-top: var(--space-fluid-md); max-width: 56ch; }
.proj-tools { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-24); padding: 0; list-style: none; }
.proj-tools li { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: var(--space-8) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.proj-media { margin: var(--space-fluid-2xl) 0 0; }
/* Centred with `translate` (not transform), so the reveal animation's transform can't undo it. */
.proj-wide { width: min(1056px, calc(100vw - 2 * var(--gutter, 24px))); margin-left: 50%; translate: -50% 0; }
.proj-media .proto-frame { aspect-ratio: var(--ar, 1440 / 772); box-shadow: none; }
.proj-media img, .proj-media video { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.proj-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); background: var(--night); transition: opacity 0.3s ease, visibility 0.3s ease; }
.proj-spinner > span:first-child { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--night-line); border-top-color: var(--accent); animation: projSpin 0.8s linear infinite; }
.proj-spinner > span:last-child { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-night-muted); }
@keyframes projSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proj-spinner > span:first-child { animation-duration: 2.4s; } }
.proj-note { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-16); padding: var(--space-16) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; }
.proj-note svg { flex: none; margin-top: 3px; color: var(--accent); }
.proj-section { margin-top: var(--space-fluid-2xl); }
.proj-section > .h3 { margin-bottom: var(--space-16); }
.proj-foot { margin-top: var(--space-section-sm); padding-top: var(--space-32); border-top: 1px solid var(--line); }