/* Detail-page framing only; shared header, palette and media tokens stay global. */
/* Compact editorial roles for this project only. Shared fonts and Hero remain unchanged. */
.project-page {
  --project-type-section: 24px;
  --project-type-subtitle: 13px;
  --project-type-emphasis: 18px;
  --project-type-module: 16px;
  --project-type-body: 14px;
  --project-type-small: 12px;
  --project-type-micro: 11px;
  --project-type-control: 13px;
  --project-type-navigation: 13px;
  --project-weight-section: var(--weight-regular);
  /* Matches the homepage Education / Skills Medium weight. */
  --project-weight-heading: 500;
  --project-leading-body: 1.65;
  --project-reading-width: 65ch;
  --project-paragraph-gap: var(--space-12);
}
html:has(.project-page) { --project-nav-height: 62px; scroll-padding-top: calc(var(--site-header-height) + var(--project-nav-height) + var(--space-24)); }
.project-page main:focus { outline: none; }
/* Opaque project-only navigation: the homepage keeps its glass and sampled tones. */
.project-page .site-header { background: var(--paper); color: var(--ink); box-shadow: none; }
.project-page .site-header::before { background: none; border-bottom: var(--border-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; mask-image: none; -webkit-mask-image: none; }
.project-page .site-header .wordmark, .project-page .site-header .primary-nav, .project-page .site-header [data-header-tone] { color: var(--ink); text-shadow: none; }
.project-page .site-header .language-switch button, .project-page .site-header .language-switch[data-header-tone] button, .project-page .site-header .language-switch > span { color: var(--color-body); text-shadow: none; }
.project-page .site-header .language-switch button[aria-pressed="true"], .project-page .site-header .language-switch button:hover { color: var(--ink); }
.project-page .site-header a:focus-visible, .project-page .site-header button:focus-visible { outline-color: var(--color-focus); }
.project-hero { padding: calc(var(--site-header-height) + var(--space-48)) var(--gutter) var(--space-48); }
.project-hero__heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--space-64); margin-bottom: var(--space-48); }
.project-hero__subtitle { margin: 0 0 var(--space-16); font-size: var(--font-h4); line-height: var(--leading-heading); color: var(--muted); letter-spacing: var(--tracking-heading); }
.project-hero h1 { margin: 0; color: var(--ink); font-size: var(--font-display); font-weight: var(--weight-regular); line-height: var(--leading-display); letter-spacing: -.025em; }
.project-hero__summary { margin: 0; max-width: 48ch; font-size: var(--font-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-body); }
.project-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin: var(--space-32) 0 0; }
.project-meta dt { font-size: var(--font-micro); line-height: var(--leading-small); letter-spacing: var(--tracking-small); color: var(--muted); }
.project-meta dd { margin: var(--space-8) 0 0; font-size: var(--font-body); line-height: var(--leading-body); color: var(--ink); }
.project-hero__media { position: relative; isolation: isolate; aspect-ratio: 21 / 9; min-height: 280px; max-height: 560px; background: var(--color-video-placeholder); }
.project-hero .project-media { position: absolute; inset: 0; }
.project-hero .project-media__poster, .project-hero .project-media__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.project-hero .project-media__video { opacity: 0; transition: opacity .65s ease; }
.project-hero [data-media-state="video"] .project-media__video { opacity: 1; }
.project-nav { position: sticky; top: var(--site-header-height); z-index: 30; padding-inline: var(--gutter); border-block: var(--border-subtle); background: var(--paper); visibility: hidden; pointer-events: none; transition: top .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s; }
/* Keep the chapter surface until the opaque global header finishes sliding in. */
.project-page:has(.site-header[data-header-hidden]) .project-nav { top: 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.project-nav__scroller { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.project-nav__scroller::-webkit-scrollbar { display: none; }
.project-nav__list { display: flex; gap: var(--space-32); width: max-content; list-style: none; margin: 0; padding: var(--space-8) 0; }
.project-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--control-size); padding: var(--space-8) 0; white-space: nowrap; color: var(--ink); font-size: var(--project-type-navigation); line-height: var(--leading-small); letter-spacing: var(--tracking-small); transition: color var(--duration-feedback) var(--ease-feedback); }
.project-nav a::after { content: ''; position: absolute; inset: auto 0 3px; height: var(--border-width); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-feedback) var(--ease-feedback); }
.project-nav a:hover, .project-nav a[aria-current="location"] { color: var(--ink); }
.project-nav a:hover::after, .project-nav a[aria-current="location"]::after { transform: scaleX(1); }
.project-nav a:focus-visible { outline-offset: 4px; }
.project-section { padding-inline: var(--gutter); }
.project-section__inner { padding-block: var(--space-64); border-top: var(--border-subtle); }
.project-section:first-child .project-section__inner { border-top: 0; }
.project-return { padding: var(--space-48) var(--gutter) var(--space-64); }
.project-return > .content-container { display: flex; justify-content: flex-end; }
.project-return__link { display: inline-flex; align-items: center; gap: var(--link-gap); min-height: var(--control-size); padding: var(--space-8) 0; color: var(--color-link); border-bottom: var(--border-subtle); font-size: var(--font-small); line-height: var(--leading-small); letter-spacing: var(--tracking-small); transition: border-color var(--duration-feedback) var(--ease-feedback); }
.project-return__link > span:first-child { font-size: var(--link-arrow-size); transition: transform var(--duration-feedback) var(--ease-feedback); }
.project-return__link:hover, .project-return__link:focus-visible { border-color: currentColor; }
.project-return__link:hover > span:first-child { transform: translateX(-3px); }
@media (max-width: 1024px) {
  .project-hero__heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .project-hero__context { max-width: 64ch; }
}
@media (max-width: 760px) {
  .project-page { --project-type-section: 23px; --project-type-subtitle: 12px; --project-type-module: 15px; --project-type-navigation: 12px; }
  .project-hero { padding-top: calc(var(--site-header-height) + var(--space-32)); padding-bottom: var(--space-32); }
  .project-hero__heading { margin-bottom: var(--space-32); }
  .project-hero__media { aspect-ratio: 16 / 9; min-height: 0; }
  .project-meta { margin-top: var(--space-24); }
  .project-nav__list { gap: var(--space-24); }
  .project-section__inner { padding-block: var(--space-48); }
  .project-return { padding-block: var(--space-32) var(--space-48); }
}
@media (prefers-reduced-motion: reduce) {
  .project-nav, .project-hero .project-media__video { transition: none; }
}