html { scroll-snap-type: y mandatory; scroll-behavior: smooth; scroll-padding-top: 0; }
.research-page { padding: 0; }
.research-page .masthead { position: fixed; inset: 0 0 auto; padding: var(--page-inset-y) var(--page-inset-x) 24px; background: #f6f5f0; z-index: 5; }


.research-page [aria-current]::after { transform: scaleX(1); }
.research-main { display: block; padding: 0; }
.project { min-height: 100svh; padding: 140px 5vw 90px; position: relative; display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.6fr); gap: 6vw; align-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.project-copy { max-width: 440px; }
.project-meta { font-size: 11px; color: #777d65; margin: 0 0 24px; }
.project h1 { font: 700 clamp(28px, 3vw, 44px)/.98 Arial, sans-serif; letter-spacing: -.065em; margin: 0 0 28px; }
.project-text { font-size: 13px; line-height: 1.65; max-height: 47svh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b5b7a9 transparent; padding-right: 12px; }
.project-text p { margin: 0; }
.project-jump { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; font-size: 36px; line-height: 1; font-weight: 300; }
.project-jump:hover { color: #777d65; }
.carousel { min-width: 0; }
.research-image { height: min(56svh, 560px); position: relative; touch-action: pan-y; }
.research-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 11px; }
.image-count { font-variant-numeric: tabular-nums; color: #777d65; }
.carousel-controls { display: flex; gap: 20px; }
.carousel-controls button { border: 0; padding: 4px 8px; background: none; color: inherit; font: inherit; font-size: 24px; cursor: pointer; }
.carousel-controls button:hover { text-decoration: underline; text-underline-offset: 4px; }
.image-caption { font-size: 11px; line-height: 1.5; margin: 12px 0 0; min-height: 5em; max-width: 620px; }
.carousel-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.project-text:focus-visible, .research-image:focus-visible { outline: 1px solid #777d65; outline-offset: 6px; }
@media(max-width: 800px) {

 .project { padding: 150px 24px 90px; grid-template-columns: 1fr; gap: 24px; align-content: center; }
 .project-copy { max-width: none; }
 .project-meta { margin-bottom: 12px; }
 .project h1 { font-size: 30px; margin-bottom: 16px; }
 .project-text { max-height: 20svh; font-size: 12px; }

 .research-image { height: 30svh; }
 .carousel-toolbar { margin-top: 10px; }
 .image-caption { min-height: 4.5em; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.accessible-pause { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.accessible-pause:focus { position: static; clip-path: none; width: auto; height: auto; font-size: 12px; }

.read-more, .swipe-hint { display: none; }
@media (max-width: 800px) {
  .project-text { position: relative; max-height: 8.25em; overflow: hidden; padding-right: 0; }
  .project-text:not(.expanded) { mask-image: linear-gradient(to bottom, #000 60%, transparent); }
  .project-text.expanded { max-height: none; overflow: visible; }
  .read-more { display: inline-block; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  .project-jump { display: none; }
  .project { padding-bottom: 40px; }
  .swipe-hint { display: block; margin: 10px 0 0; font-size: 10px; color: #777d65; }
  .carousel-controls button:not(.accessible-pause) { display: none; }
}