.project-page { background: var(--cream); }
.project-detail-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(var(--container), calc(100% - 3rem)); min-height: 4.8rem; margin-inline: auto; border-bottom: 1px solid var(--line); background: var(--cream); }
.detail-brand { display: inline-flex; align-items: center; gap: .65rem; font-family: "Cascadia Mono", Consolas, monospace; font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.detail-brand .brand-mark { font-size: .58rem; }
.detail-nav { display: flex; gap: 1.3rem; }
.detail-nav a { padding: .3rem 0; border-bottom: 1px solid transparent; color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.detail-nav a:hover { border-color: var(--accent); color: var(--ink); }
.project-hero, .project-details { width: min(var(--container), calc(100% - 3rem)); margin-inline: auto; }
.project-hero { padding: clamp(4rem, 8vw, 7rem) 0 7rem; }
.project-title-block { max-width: 57rem; }
.project-title-block > p, .section-label { margin: 0 0 1.2rem; color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.project-title-block h1 { margin: 0; font-size: clamp(3.3rem, 7vw, 6.8rem); font-weight: 750; letter-spacing: 0; line-height: .92; text-wrap: balance; }
.has-gsap .project-title-block > *, .has-gsap .demo-window, .has-gsap .details-intro, .has-gsap .details-layout, .has-gsap .workflow-section, .has-gsap .project-resources { will-change: transform, opacity; }
.project-title-block > span { display: block; max-width: 42rem; margin-top: 1.5rem; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.project-hero-facts { display: grid; grid-template-columns: minmax(12rem, .43fr) minmax(0, 1.57fr); gap: 2rem; max-width: 60rem; margin-top: 3rem; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-hero-facts > span { display: grid; gap: .35rem; font-size: .87rem; font-weight: 700; line-height: 1.55; }
.project-hero-facts strong { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: .64rem; text-transform: uppercase; }
.demo-window { margin-top: 4.5rem; border-top: 1px solid var(--ink); background: var(--paper); }
.window-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding-inline: 1rem; border-bottom: 1px solid var(--line); background: var(--cream); }
.window-topbar strong { color: var(--muted); font-family: "Cascadia Mono", Consolas, monospace; font-size: .65rem; text-transform: uppercase; }
.window-topbar a { padding-bottom: .12rem; border-bottom: 1px solid currentColor; font-size: .82rem; font-weight: 700; }
.demo-window iframe { display: block; width: 100%; height: min(47rem, 78dvh); border: 0; background: var(--paper); }
.project-details { padding: 6.5rem 0 7rem; }
.details-intro { max-width: 62rem; }
.details-intro h2 { margin: 0; font-size: clamp(2.1rem, 4.2vw, 4rem); font-weight: 750; letter-spacing: 0; line-height: 1.02; text-wrap: balance; }
.details-intro > p:last-child { max-width: 42rem; margin: 1.5rem 0 0; color: var(--muted); line-height: 1.72; }
.details-layout { display: grid; grid-template-columns: minmax(12rem, .43fr) minmax(0, 1.57fr); gap: clamp(2rem, 7vw, 8rem); margin-top: 4rem; padding: 2.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-facts { margin: 0; }
.case-facts > div { padding: 1rem 0; border-top: 1px solid var(--line); }
.case-facts > div:first-child { padding-top: 0; border-top: 0; }
.case-facts dt, .case-facts dd { margin: 0; }
.case-facts dt { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.case-facts dd { margin-top: .35rem; font-size: .88rem; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.contribution-list h3, .workflow-section h3, .project-resources h3 { margin: 0; font-size: 1.4rem; font-weight: 750; }
.contribution-list p { max-width: 43rem; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.68; }
.workflow-section, .project-resources { margin-top: 5.5rem; }
.workflow-list, .resource-list { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.workflow-list article { display: grid; grid-template-columns: minmax(11rem, .4fr) minmax(0, 1.6fr); gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.workflow-list strong { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; font-size: .72rem; }
.workflow-list p { margin: 0; color: var(--muted); line-height: 1.65; }
.resource-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.resource-item strong { font-weight: 750; }
.resource-item p { max-width: 38rem; margin: .4rem 0 0; color: var(--muted); line-height: 1.6; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.resource-actions a { padding-bottom: .12rem; border-bottom: 1px solid currentColor; font-size: .84rem; font-weight: 700; }
@media (max-width: 48rem) {
  .project-detail-header, .project-hero, .project-details { width: min(var(--container), calc(100% - 2rem)); }
  .project-detail-header { min-height: 4.2rem; }
  .detail-nav { gap: 1rem; }
  .project-hero { padding: 4rem 0 5rem; }
  .project-title-block h1 { font-size: clamp(3rem, 13vw, 4.8rem); }
  .project-hero-facts, .details-layout, .workflow-list article { grid-template-columns: 1fr; gap: 1.15rem; }
  .demo-window { margin-top: 3.2rem; }
  .demo-window iframe { height: 70dvh; }
  .project-details { padding: 5rem 0; }
  .resource-item { grid-template-columns: 1fr; gap: 1rem; }
}

/* Case studies share the homepage visual language and keep the demo lightweight. */
.project-page { background: var(--bg); }
.project-detail-header { width: min(var(--wrap), calc(100% - 4rem)); min-height: 4.5rem; border-bottom-color: rgba(228, 231, 236, .92); background: rgba(247, 248, 250, .9); backdrop-filter: blur(10px); }
.detail-brand { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 1.05rem; text-transform: none; }
.detail-brand .brand-mark { color: var(--blue); font-size: .76rem; }
.detail-nav { gap: 2rem; }
.detail-nav a { border: 0; color: var(--muted); font-family: Inter, Arial, sans-serif; font-size: .82rem; text-transform: none; }
.detail-nav a:hover { border: 0; color: var(--ink); }
.project-hero, .project-details { width: min(var(--wrap), calc(100% - 4rem)); }
.project-hero { display: block; padding: clamp(5rem, 10vw, 9rem) 0 7rem; }
.project-title-block { position: static; max-width: 56rem; }
.project-title-block > p, .section-label { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .04em; }
.project-title-block h1 { max-width: 34rem; font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(3.4rem, 7vw, 6.6rem); font-weight: 700; letter-spacing: -.045em; line-height: .96; }
.project-title-block > span { max-width: 29rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.project-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; max-width: none; padding-top: 1.4rem; border-top-color: var(--line); border-bottom: 0; }
.project-hero-facts > span { font-size: .88rem; font-weight: 600; }
.project-hero-facts strong { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .66rem; letter-spacing: .04em; }
.demo-window { overflow: hidden; margin-top: 4rem; border: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px rgba(18, 20, 26, .08); animation: detail-rise .7s var(--ease) both; }
.window-topbar { min-height: 3.3rem; padding: 0 1.1rem; border-bottom-color: var(--line); background: var(--surface); }
.window-status { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; }
.window-status i { width: .42rem; height: .42rem; border-radius: 50%; background: #4caf78; box-shadow: 0 0 0 .2rem rgba(76, 175, 120, .14); }
.window-topbar a { color: var(--ink); font-size: .78rem; text-decoration: none; }
.window-topbar a:hover { color: var(--blue); }
.demo-window iframe { height: clamp(34rem, 62vw, 48rem); background: var(--surface); }
.project-details { padding: 0 0 8rem; }
.details-intro { max-width: 58rem; padding-top: 5rem; border-top-color: var(--line); }
.details-intro h2 { max-width: 52rem; font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(2.2rem, 4.4vw, 4.1rem); font-weight: 700; letter-spacing: -.04em; }
.details-intro > p:last-child, .workflow-list p, .resource-item p, .contribution-list p { color: var(--muted); }
.details-layout { grid-template-columns: minmax(12rem, .45fr) minmax(0, 1.55fr); gap: clamp(2rem, 8vw, 9rem); border-top-color: var(--line); border-bottom-color: var(--line); }
.case-facts > div, .contribution-list p, .workflow-list, .workflow-list article, .resource-list, .resource-item { border-color: var(--line); }
.case-facts dt, .workflow-list strong { color: var(--blue); }
.case-facts dt, .workflow-list strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.contribution-list h3, .workflow-section h3, .project-resources h3 { font-family: 'Space Grotesk', Arial, sans-serif; }
.resource-actions a { color: var(--ink); text-decoration: none; }
.resource-actions a:hover { color: var(--blue); }
@keyframes detail-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .demo-window { animation: none; } }
@media (max-width: 48rem) {
  .project-detail-header, .project-hero, .project-details { width: min(var(--wrap), calc(100% - 2.5rem)); }
  .project-hero { display: block; padding: 4rem 0 5rem; }
  .project-title-block { position: static; }
  .project-title-block h1 { font-size: clamp(3rem, 13vw, 4.8rem); }
  .project-hero-facts { grid-template-columns: 1fr; max-width: none; }
  .demo-window { margin-top: 3.4rem; }
  .demo-window iframe { height: min(70dvh, 40rem); }
  .details-intro { padding-top: 4rem; }
  .project-details { padding-bottom: 5rem; }
}
@media (max-width: 34rem) {
  .detail-brand { font-size: .9rem; }
  .detail-nav { gap: 1rem; }
  .detail-nav a { font-size: .72rem; }
  .window-topbar { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: .8rem; }
}