/* A continuous illustrated studio ribbon in the established Rihla palette. */
.portfolio-page .work-hero.work-hero-gallery { padding: 8.1rem var(--page-x) 2rem; grid-template-columns: minmax(0,1.45fr) minmax(0,.55fr); column-gap: clamp(2rem,5vw,5rem); row-gap: 1.8rem; align-items: end; overflow: hidden; }
.portfolio-page .work-hero.work-hero-gallery h1 { max-width: 18ch; margin: 0; font-size: clamp(3.4rem,5.8vw,6.1rem); line-height: .91; }
.work-hero-gallery .eyebrow { margin-bottom: 1.3rem; }
.work-hero-gallery h1 em { color: var(--olive-deep); }
.work-hero-aside { max-width: 26rem; padding-bottom: .2rem; }
.work-hero-aside > p { margin-bottom: 1.3rem; color: var(--olive-deep); font-size: .98rem; line-height: 1.65; }
.work-hero-aside .text-link { display: inline-block; font-size: .66rem; }
.project-belt { --art-scale: 1; grid-column: 1 / -1; min-width: 0; width: calc(100% + var(--page-x) * 2); margin-inline: calc(var(--page-x) * -1); }
.project-belt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--page-x); border-top: 1px solid var(--tobacco-line); }
.project-belt-toolbar p { margin: 0; color: var(--olive-deep); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-belt-toolbar p > span { margin-inline: .7rem; color: var(--terracotta); }
.project-belt-toolbar .motion-toggle { position: static; min-height: 2rem; padding: .4rem .6rem; border-color: var(--tobacco-line); background: transparent; color: var(--tobacco); }
.project-belt-toolbar .motion-toggle:hover { background: var(--tobacco); color: var(--ivory); }
.project-belt-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: .4rem .7rem; -webkit-mask-image: linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); mask-image: linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); }
.project-belt-viewport::-webkit-scrollbar { display: none; }
.js .project-belt-viewport { overflow-x: hidden; }
.js .project-belt-viewport:focus-within { overflow-x: auto; }
.project-belt-track { display: flex; width: max-content; }
.project-belt-set { display: flex; flex: none; gap: 0; padding: 0; margin: 0; list-style: none; }
.project-belt-card.art-plate { position: relative; flex: none; width: calc(var(--card-width) * var(--art-scale)); height: calc(260px * var(--art-scale)); padding: 0; overflow: hidden; }
.art-plate > svg { display: block; width: 100%; height: 100%; max-width: none; border-right: 1px solid rgba(48,18,0,.16); }
.art-plate .art-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
.art-plate .art-italic { font-style: italic; }
.art-plate .art-small { font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; }
.art-plate .art-sign { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.art-plate .belt-coupe { transform-origin: 50% 70%; }
.project-belt-viewport { padding-bottom: 0; }
.project-belt-track { border-block: 1px solid var(--tobacco-line); }
.project-belt.belt-out-of-view { --art-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .js .project-belt-track { animation: project-belt-flow 85s linear infinite; animation-play-state: var(--art-play-state,running); }
  .project-belt-viewport:hover .project-belt-track { animation-play-state: paused; }
  .project-belt-viewport:focus-within .project-belt-track { animation: none; transform: none; }
}
@keyframes project-belt-flow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .belt-road-line { animation: illustrated-road-flow 12s linear infinite; animation-play-state: var(--art-play-state,running); }
  .belt-steam { animation: studio-steam 4s ease-in-out infinite; animation-play-state: var(--art-play-state,running); }
}
@keyframes illustrated-road-flow { to { stroke-dashoffset: -200; } }
@keyframes studio-steam { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: .85; transform: translateY(-3px); } }
.portfolio-page .portfolio-proof-band { width: 100%; max-width: none; padding: 1.6rem var(--page-x) 1.8rem; border-inline: 0; border-block: 1px solid var(--tobacco-line); background: var(--ivory-bright); }
.portfolio-proof-band > .mini-label { margin-bottom: .8rem; }
.portfolio-proof-band .proof-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.portfolio-proof-band .proof-grid a:nth-child(n) { min-height: 7.8rem; padding: 1rem 1.3rem; border-top: 1px solid var(--tobacco-line); border-right: 1px solid var(--tobacco-line); }
.portfolio-proof-band .proof-grid a:first-child { padding-left: 0; }
.portfolio-proof-band .proof-grid a:last-child { border-right: 0; }
.portfolio-proof-band .proof-grid strong { margin: .7rem 0 .55rem; font-size: clamp(2.5rem,3.5vw,3.8rem); }
.portfolio-proof-band .proof-footnote { padding-top: .9rem; font-size: .65rem; }
@media (max-width: 840px) {
  .portfolio-page .work-hero.work-hero-gallery { padding-top: 7rem; grid-template-columns: 1fr; row-gap: 1.2rem; }
  .portfolio-page .work-hero.work-hero-gallery h1 { max-width: 17ch; font-size: clamp(3.4rem,7.6vw,4.4rem); }
  .work-hero-aside { display: flex; align-items: flex-end; justify-content: space-between; max-width: none; gap: 2rem; }
  .work-hero-aside > p { max-width: 34ch; margin-bottom: 0; font-size: .9rem; }
  .work-hero-aside .text-link { flex: none; }
  .project-belt { --art-scale: .9; }
  .portfolio-proof-band .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portfolio-proof-band .proof-grid a:nth-child(odd) { padding-left: 0; }
  .portfolio-proof-band .proof-grid a:nth-child(even) { border-right: 0; }
}
@media (max-width: 600px) {
  .portfolio-page .work-hero.work-hero-gallery { padding-top: 6.7rem; padding-bottom: 1rem; row-gap: 1.3rem; }
  .portfolio-page .work-hero.work-hero-gallery h1 { max-width: 13ch; font-size: clamp(3.15rem,12vw,4rem); }
  .work-hero-gallery .eyebrow { margin-bottom: 1rem; font-size: .6rem; }
  .work-hero-aside { display: block; }
  .work-hero-aside > p { max-width: 36ch; margin-bottom: 1rem; font-size: .88rem; }
  .project-belt { --art-scale: .8; }
  .project-belt-toolbar { padding-block: .45rem; }
  .project-belt-toolbar p { font-size: .52rem; letter-spacing: .06em; }
  .project-belt-toolbar p > span { margin-inline: .4rem; }
  .portfolio-page .portfolio-proof-band { padding-block: 1.2rem; }
  .portfolio-proof-band .proof-grid a:nth-child(n) { min-height: 7.4rem; padding-block: .85rem; }
  .portfolio-proof-band .proof-grid strong { font-size: clamp(2.4rem,9.5vw,3.2rem); }
}
@media (hover: none) {
  .js .project-belt-track { animation: none; transform: none; }
  .js .project-belt-viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .project-belt-card { scroll-snap-align: start; }
  .project-belt-set[aria-hidden="true"] { display: none; }
  .project-belt-toolbar .motion-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .project-belt-viewport { overflow-x: auto; }
  .project-belt-set[aria-hidden="true"] { display: none; }
  .project-belt-track { animation: none; transform: none; }
}

/* Case-study narratives: one clear sequence, with supporting work below. */