/* Third screen only. Scroll pose and hover width live on separate elements. */
.work-collection { display: flex; flex-direction: column; gap: var(--space-32); padding: var(--section-space) var(--gutter); overflow: clip; overflow-anchor: none; background: var(--paper); }
.work-collection__header, .work-gallery { width: min(100%, var(--content-max)); margin-inline: auto; }
.work-collection__header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.work-collection__header h2 { margin: 0; }
.work-collection__hint { margin: 0; color: var(--muted); font-size: var(--font-micro); line-height: var(--leading-small); letter-spacing: var(--tracking-small); text-align: right; }
.work-collection__hint-hover { display: none; }
.work-gallery { position: relative; min-width: 0; }
.work-gallery__viewport { --gallery-card-width: 265px; --gallery-expanded-width: 425px; --gallery-min-card-width: 230px; --gallery-visible-count: 0; --gallery-edge-fade: 52px; --gallery-snap-distance: 28px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: auto; padding-block: 16px 56px; margin-block: -16px -56px; scrollbar-width: thin; scrollbar-color: #7d8f9f #c3cdd5; }
/* Cancel padding in document flow, but keep a full painting gutter for the
   existing vertical entrance, rounded card edges and the 8px hover lift. */
.work-gallery[data-gallery-ready] .work-gallery__viewport {
  padding-bottom: 224px; margin-bottom: -224px; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gallery-edge-fade);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gallery-fade-left, 0px), #000 calc(100% - var(--gallery-fade-right, 0px)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--gallery-fade-left, 0px), #000 calc(100% - var(--gallery-fade-right, 0px)), transparent);
}
/* Let the range scrub freely and keep width transitions from re-snapping. */
.work-gallery[data-gallery-adjusting] .work-gallery__viewport,
.work-gallery:has(.work-gallery__rail:active) .work-gallery__viewport,
.work-gallery:has(.work-gallery__rail:focus-visible) .work-gallery__viewport { scroll-snap-type: none; }
.work-gallery[data-gallery-ready] .work-gallery__viewport::-webkit-scrollbar { display: none; }
.work-gallery__viewport:focus-visible { outline: none; }
.work-gallery:has(.work-gallery__viewport:focus-visible) { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-8); border-radius: var(--media-radius); }
.work-gallery__rail { position: relative; z-index: 1; display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 32px; margin: var(--space-24) 0 0; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.work-gallery__rail[hidden] { display: none; }
.work-gallery__rail::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--color-rail-track); }
.work-gallery__rail::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--gallery-thumb-width, 80px); height: 4px; margin-top: -1px; border: 0; border-radius: 2px; background: var(--color-rail); }
.work-gallery__rail::-moz-range-track { height: 2px; border-radius: 2px; background: var(--color-rail-track); }
.work-gallery__rail::-moz-range-thumb { width: var(--gallery-thumb-width, 80px); height: 4px; border: 0; border-radius: 2px; background: var(--color-rail); }
.work-gallery__rail:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-8); border-radius: var(--radius-sm); }
.work-cards { display: flex; width: max-content; gap: var(--space-16); height: clamp(440px, 60svh, 600px); padding: 0; margin: 0; list-style: none; }
.work-card { position: relative; flex: 1 0 var(--gallery-card-width, 265px); min-width: var(--gallery-min-card-width, 230px); height: 100%; scroll-snap-align: var(--gallery-snap-align, start); scroll-snap-stop: normal; transition: flex-grow .7s cubic-bezier(.22, 1.12, .36, 1); }
.work-gallery[data-gallery-ready] .work-card { flex-basis: 0; }
.work-collection[data-work-ready] .work-card { transform: translate3d(0, var(--work-enter-y, 0px), 0); opacity: var(--work-enter-opacity, 1); }
.work-collection[data-active-work] .work-card { flex-grow: var(--gallery-muted-grow, .65); }
.work-collection[data-active-work] .work-card[data-expanded] { flex-grow: var(--gallery-active-grow, 1.7); }
.work-card:nth-child(3n + 1) { --card-color: var(--color-card-blue); }
.work-card:nth-child(3n + 2) { --card-color: var(--color-card-green); }
.work-card:nth-child(3n) { --card-color: var(--color-card-violet); }
.work-card__surface { position: relative; height: 100%; isolation: isolate; background: var(--card-color); border: var(--border-media); transform: translateY(0); transition: transform .65s cubic-bezier(.22, 1.12, .36, 1), box-shadow .5s ease; }
.work-card[data-expanded] .work-card__surface { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.work-card__media { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-24); color: var(--color-on-card); }
.work-card__media span { max-width: 160px; font-size: var(--font-micro); line-height: var(--leading-body); letter-spacing: var(--tracking-small); text-align: center; opacity: 0; transition: opacity .3s ease; }
.work-card[data-expanded] .work-card__media span { opacity: 1; transition-delay: .16s; }
.work-card__number { position: absolute; top: var(--space-24); left: var(--space-24); font-size: var(--font-micro); letter-spacing: .06em; color: var(--color-on-card); }
.work-card__mark { position: absolute; top: var(--space-24); right: var(--space-24); width: 12px; height: 12px; opacity: .65; transition: transform .5s ease; }
.work-card__mark::before, .work-card__mark::after { content: ""; position: absolute; top: 5.5px; left: 0; width: 12px; height: 1px; background: currentColor; }
.work-card__mark::after { transform: rotate(90deg); }
.work-card[data-expanded] .work-card__mark { transform: rotate(45deg); }
.work-card__body { position: absolute; bottom: var(--space-24); left: var(--space-24); right: var(--space-24); }
.work-card__body h3 { margin: 0; color: var(--ink); font-size: var(--font-h3); line-height: var(--leading-heading); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); overflow-wrap: normal; }
.work-card__description { max-height: 0; margin: 0; opacity: 0; overflow: hidden; color: var(--color-on-card); font-size: var(--font-small); line-height: var(--leading-body); letter-spacing: var(--tracking-body); transition: max-height .5s ease, margin .5s ease, opacity .25s ease; }
.work-card[data-expanded] .work-card__description { max-height: 90px; margin-top: 14px; opacity: 1; transition: max-height .5s ease, margin .5s ease, opacity .35s ease .15s; }
.work-card__toggle { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; border-radius: inherit; background: transparent; cursor: pointer; touch-action: manipulation; }
.work-card__toggle:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: -6px; border-radius: inherit; }
/* Real covers share the existing frame, title baseline and accordion geometry. */
.work-card--cover .work-card__media { padding: 0; }
.work-card__cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position, center); pointer-events: none; user-select: none; }
.work-card--cover .work-card__surface::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgb(10 23 32 / .28), transparent 24%, transparent 45%, rgb(10 23 32 / .80)); }
.work-card--cover .work-card__body, .work-card--cover .work-card__number, .work-card--cover .work-card__mark { z-index: 1; color: var(--color-on-media); text-shadow: var(--shadow-link-on-media); }
.work-card--cover .work-card__body h3 { color: inherit; }
.work-card--cover .work-card__description:empty { display: none; }
.work-card--cover .work-card__toggle { z-index: 2; }
.work-card--cover .work-card__toggle:focus-visible { outline-color: var(--color-on-media); }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .work-collection__hint-hover { display: inline; }
  .work-collection__hint-tap { display: none; }
}
@media (max-width: 760px) {
  .work-collection { gap: var(--space-24); }
  .work-collection__header, .work-gallery { width: 100%; }
  .work-collection__header { gap: 12px; }
  .work-collection__hint { max-width: 120px; }
  .work-gallery__viewport { --gallery-card-width: 0px; --gallery-expanded-width: 0px; --gallery-min-card-width: 0px; --gallery-visible-count: 1.8; }
  .work-gallery__rail { height: var(--control-size); margin-top: var(--space-16); }
  .work-cards { height: clamp(360px, 56svh, 480px); gap: var(--space-12); }
  .work-card { flex-basis: 180px; }
  .work-card__number { top: var(--space-16); left: var(--space-12); }
  .work-card__mark { top: var(--space-16); right: var(--space-12); width: 8px; height: 8px; }
  .work-card__mark::before, .work-card__mark::after { top: 3.5px; width: 8px; }
  .work-card__body { left: var(--space-12); right: var(--space-12); bottom: var(--space-24); }
  .work-card__body h3 { letter-spacing: 0; }
  .work-card__description { letter-spacing: 0; }
  .work-card__media { padding: var(--space-12); }
}
@media (prefers-reduced-motion: reduce) {
  .work-collection[data-work-ready] .work-card { transform: none; opacity: 1; }
  .work-card[data-expanded] .work-card__surface { transform: none; }
}