/* Project-page entry point. BMS keeps its existing, independent stylesheet chain. */
@import url('/css/project-tokens.css');
@import url('/css/project-page.css?v=chapter-title-2');
@import url('/css/site-layout.css?v=site-media-4');
@import url('/project-page/hero.css?v=hero-2');
@import url('/project-page/chapters.css?v=2');

.project-standard .hero07-cover .hero07-media { height: clamp(300px, 55svh, 600px); }
.project-standard .hero07-cover .hero07-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-standard .hero07-cover .hero07-media::after { content: ''; position: absolute; inset: auto 0 -1px; height: 88px; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: linear-gradient(transparent, var(--color-bg)); mask-image: linear-gradient(transparent, #000 80%); }
.project-standard .hero07-cover .hero07-copy { padding-block: 32px 0; }
.project-standard .hero07-heading { width: 100%; max-width: none; }
body.project-standard .hero07 + .project-meta { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px 12px; }
.project-standard .project-meta > div { min-width: 0; }
.project-page.project-standard .project-section-heading .project-eyebrow { display: block; margin-bottom: 16px; }
.project-standard .project-section-heading .project-eyebrow:empty { display: none; }
.project-standard .project-section-lead { display: grid; gap: 32px; min-width: 0; }
.project-standard .project-content--wide { grid-column: 1 / -1; min-width: 0; }
.project-standard .project-main h4 { font-weight: 700; margin-block: 24px 8px; }
.project-standard .project-media :is(img, video) { display: block; width: 100%; height: auto; object-fit: contain; border: 1px solid #d6d3cf; border-radius: 4px; box-sizing: border-box; }
.project-standard .project-media--borderless :is(img, video) { border: 0; box-shadow: none; }
.project-standard :is(.project-chapter-nav, .project-back-to-top) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity 240ms ease, transform 240ms ease, visibility 0s 240ms, background-color 180ms ease, top 300ms ease; }
.project-standard :is(.project-chapter-nav, .project-back-to-top).is-reading-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
@media (min-width: 601px) {
  body.project-standard .hero07 + .project-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-standard .project-section > .project-section-body:not(.project-media--wide) { grid-column: 2; }
  .project-standard .project-section > .project-section-body.project-content--wide { grid-column: 1 / -1; }
  .project-standard .project-section-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--project-gap) var(--project-column-gap); }
  /* Wide content is a separate row; it must not change the heading's column. */
  .project-standard .project-section:has(> .project-media--wide) > .project-section-heading { position: sticky; top: var(--project-heading-top, var(--project-sticky-top)); grid-column: 1; max-width: none; }
}
@media (max-width: 600px) {
  .project-standard .hero07-cover .hero07-media { height: clamp(240px, 42svh, 380px); }
  .project-standard .hero07-cover .hero07-copy { padding-block: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .project-standard :is(.project-chapter-nav, .project-back-to-top) { transition: none; transform: none; }
}

/* Own progress value: the legacy script still serves BMS and measures the whole page. */
.project-standard .project-chapter-nav::after { transform: scaleX(var(--project-reading-progress, 0)); }
.project-standard .project-reading-ring circle { stroke-dashoffset: calc(100 * (1 - var(--project-reading-progress, 0))); opacity: var(--project-reading-started, 0); }