/* Keep the active categories and the Rive pager below the masthead. */
body.home-page .work-controls {
  position: sticky;
  top: var(--controls-top, 0px);
  /* The categories occupy the masthead’s bottom padding when they pin. */
  z-index: 101;
  background: var(--surface);
  overflow-anchor: none;
  padding-block: clamp(16px, 1.8vw, 26px) 14px;
}
/* Cards slide beyond the content column during a category change. Paint
   the dock surface all the way to both edges, independently of its content. */
body.home-page .work-controls::before {
  content: "";
  position: absolute;
  inset: -2px 0 0;
  z-index: -1;
  pointer-events: none;
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}
body.home-page #work { isolation: isolate; }
.motion-reading {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + clamp(5px, 1vw, 16px));
  z-index: 81;
  width: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line);
  pointer-events: none;
}
.motion-reading.is-reading {
  opacity: .48;
  visibility: visible;
  transition-delay: 0s;
}
.motion-reading[hidden], .project-position[hidden],
body:not(.home-page) > .motion-reading,
html[data-signature-stage] .motion-reading { display: none; }
.motion-reading > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  transform: scaleY(var(--read, 0));
  transform-origin: top;
}
.project-position {
  position: sticky;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  text-align: left;
  margin-top: clamp(32px, 4.5vw, 72px);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
body.home-page #work:has(.project-position:not([hidden])) > footer {
  margin-top: clamp(20px, 2vw, 32px);
  padding-top: clamp(20px, 2vw, 32px);
}
body.home-page #work .load-more-area:not([hidden]) {padding:0}
.project-position > span {
  display: inline-block;
  --label-padding: 9px;
  margin-inline-start: calc(-1 * var(--label-padding));
  padding: 4px var(--label-padding);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 500 12px/1.4 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .18s ease;
}
.project-position.is-reading > span { opacity: 1; }
@media(prefers-reduced-motion:reduce) {
  .motion-reading, .project-position > span { transition: none; }
}
body.home-page .filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.gallery-categories {
  --category-gap: clamp(16px, 2.1vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px var(--category-gap);
}
.gallery-categories[hidden] { display: none; }
.category-line { display: contents; }
body.home-page .work-controls .filters .gallery-categories button.filter {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-inline: 0;
}
.gallery-categories .category-symbol {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 4px;
  height: var(--mark-size, 20px);
  margin-inline-end: var(--mark-gap, 6px);
  transition: width .16s ease;
}
.gallery-categories .active .category-symbol { width: var(--mark-size, 20px); }
.gallery-categories .category-symbol::before, .gallery-categories .category-mark {
  position: absolute;
  transition: opacity .14s ease, transform .16s ease;
}
.gallery-categories .category-symbol::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .7;
}
.gallery-categories .active .category-symbol::before { opacity: 0; transform: scale(.45); }
.gallery-categories .category-mark {
  width: var(--mark-size, 20px);
  height: var(--mark-size, 20px);
  fill: currentColor;
  opacity: 0;
  transform: scale(.55);
}
.gallery-categories .active .category-mark { opacity: 1; transform: scale(1); }
body.home-page .gallery-categories .filter.active::after {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: none;
}
body.home-page .gallery-categories .filter:not(.active) { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .gallery-categories .category-symbol, .gallery-categories .category-symbol::before,
  .gallery-categories .category-mark { transition: none; }
}
@media (max-width: 650px) {
  body.home-page .work-controls { padding-block: 14px 12px; }
  .gallery-categories {
    --mark-size: 15px;
    --mark-gap: 4px;
    --category-gap: clamp(12px, 3.8vw, 22px);
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .category-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--category-gap);
  }

}
@media (max-width: 359px) {
  body.home-page .filters .gallery-categories .filter { font-size: 13px; }
}
body.home-page .gallery-categories .filter .category-name {
  font-weight:500;translate:none;
}
/* Keep the scroll meter's anchor and the spacing below the category row. */
.gallery-rule {
  display: block;
  height: 1px;
  margin-top: 9px;
  visibility: hidden;
}
body.home-page .navigation-group {
  margin-top: 0;
  padding-block: 9px 0;
  border-top: 0;
}
body.home-page .navigation-group .pages {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 18px);
  width: max-content;
  max-width: 100%;
}
body.home-page .navigation-group .pages .page-row {
  flex: 0 0 auto;
  position: relative;
  --number-width: clamp(25px, 6.8vw, 34px);
  display: grid;
  grid-template-columns: repeat(var(--number-slots), var(--number-width));
  align-items: center;
  gap: clamp(2px, .65vw, 9px);
}
body.home-page .navigation-group .pages .page-row > * { grid-row: 1; }
body.home-page .navigation-group .pages .page-row > [hidden] { display:none; }
body.home-page .navigation-group .pages .page-row button,
body.home-page .navigation-group .pages .page-row button:is(:hover,:active,:focus-visible,.current) {
  width: 100%; min-width: 0; height: 34px; padding: 0; margin: 0;
  line-height: 32px; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
  transform:none; scale:none; translate:none; border:0; background:transparent;
}
body.home-page .navigation-group .pages .page-row button::after {
  content:''; display:block; position:absolute; inset:auto 3px 1px;
  width:auto; height:1.5px; background:currentColor; filter:none;
  opacity:0; transform:none; animation:none!important; transition:none!important;
}
/* The current page is a stationary marker; the other numbers are pointer targets. */
.page-row button[aria-current="page"] { pointer-events:none; }
body.home-page .navigation-group .pages .page-row button[aria-current="page"]::after {opacity:1}
body.home-page .navigation-group .pages .page-row button:not([aria-current]):focus-visible::after {opacity:.28}
@media(hover:hover){
  body.home-page .navigation-group .pages .page-row button:not([aria-current]):hover::after {opacity:.28}
}
body.home-page .navigation-group .page-gap {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
body.home-page .navigation-group .pages .page-step {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(36px, 9vw, 46px);
  min-width: 0;
  height: 34px;
  padding: 0;
  margin: 0;
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: transparent;
}
body.home-page .navigation-group .pages .page-step:is(:hover,:focus-visible) {
  border-color: var(--text);
  background: var(--surface-top);
}
body.home-page #work {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  min-height: calc(100svh - var(--controls-top, 0px) - var(--pinned-height, 0px));
  overflow-anchor: none;
}

/* Short pages share a footer baseline. Taller captions and long lists grow naturally. */
body.home-page #portfolio-grid { margin-block-end: auto; }
body.home-page[data-layout="rive"] #portfolio-grid {
  align-content: start;
  min-block-size: calc(50cqi + clamp(16rem, 29rem - 25cqi, 20rem));
}
@media (max-width: 650px) {
  body.home-page[data-layout="rive"] #portfolio-grid {
    min-block-size: calc(200cqi + clamp(32rem, 59rem - 100cqi, 40rem));
  }
}

/* Frames sampled from the original MotionMax refresh lettering. */
.home-page .preview-loader:not(.unavailable):not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: var(--surface);
  container-type: size;
  pointer-events: none;
}
.home-page .preview-loader[hidden] { display: none; }
.preview-loader:not(.unavailable)::after {
  content: "";
  width: min(88cqw, 220cqh, 480px);
  aspect-ratio: 10/3;
  background: #141412;
  mask: url('assets/lettering-refresh-large.webp') center top / 100% 4000% no-repeat;
  animation: lettering-refresh 1.008s steps(40, jump-none) -0.504s infinite;
}
@keyframes lettering-refresh { to { mask-position: center 100%; } }
.paused .preview-loader::after { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce){
  .preview-loader:not(.unavailable)::after { animation: none; }
}

#portfolio-grid > article:not([data-near="true"]) .preview-loader::after { animation-play-state: paused; }

/* Match native gesture ownership to the listeners configured on each artboard. */
.rive-visual canvas[data-touch="scroll"] { touch-action: pan-y pinch-zoom; }
.rive-visual canvas[data-touch="interact"] { touch-action: none; }