/* ==========================================================================
   Proven Construction LLC — components.css
   Portfolio-page components only. Linked from portfolio.html and nowhere else.

   Consumes the token layer defined in styles.css (--color-*, --space-*,
   --radius-*, --shadow-*, --step-*, --ease*, --transition*). Defines no new
   tokens of its own except component-scoped custom properties, which are
   all namespaced to their component (--cmp-*, --seq-*, --work-*).

   Sections
     1. Editorial primitives (section intro, case layout)
     2. .cmp  — before/after comparison slider
     3. .seq  — project progression strip
     4. .work — asymmetric portfolio gallery
     5. Filter controls
     6. Reduced motion + print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Editorial primitives
   -------------------------------------------------------------------------- */

/* A left-aligned section intro. The site's default .section-header is centred
   with a centred rule under it; these blocks are deliberately ranged left so
   the portfolio page reads as an article rather than a brochure. */
.ed-intro {
  max-width: 46rem;
  margin: 0 0 var(--space-9);
}

.ed-intro__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
}

.ed-intro__title {
  font-size: var(--step-2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.ed-intro__lede {
  font-size: var(--step-body-lg);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0;
}

/* Hairline rule with a short accent lead-in — the page's repeating beat. */
.ed-rule {
  border: 0;
  height: 1px;
  background: var(--color-border-soft);
  margin: var(--space-9) 0;
  position: relative;
}

.ed-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 3px;
  margin-top: -1px;
  background: var(--color-accent);
}

/* Editorial case: text column + media column, alternating sides. */
.ed-case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8) var(--space-9);
  align-items: start;
}

.ed-case + .ed-case {
  margin-top: var(--space-10);
}

.ed-case--flip .ed-case__text {
  order: 2;
}

.ed-case__index {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
}

.ed-case__title {
  font-size: var(--step-3);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.ed-case__text p {
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  max-width: 46ch;
  margin: 0 0 var(--space-5);
}

/* The copy column is short and the media column can be long. Pinning the copy
   keeps it beside the photographs instead of leaving a void next to them. */
@media (min-width: 993px) {
  .ed-case__text {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }
}

/* Media column — may hold more than one exhibit (a wipe plus a diptych). */
.ed-case__media {
  min-width: 0;
}

.ed-case__media > * + * {
  margin-top: var(--space-6);
}

/* Spec list — a small, structural "what was done" table. */
.ed-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-soft);
}

.ed-specs li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--step-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.ed-specs dfn,
.ed-specs b {
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 2px;
}


/* --------------------------------------------------------------------------
   2. .cmp — before/after comparison slider
   --------------------------------------------------------------------------
   No-JS behaviour: --cmp-pos stays 0%, the "before" layer is fully clipped
   away and the handle is not rendered, so the page degrades to the finished
   (after) photograph. main.js adds .cmp--live, which reveals the control.
   No layout shift: the stage owns an explicit aspect-ratio and both photos
   are absolutely positioned inside it.
   -------------------------------------------------------------------------- */

.cmp {
  --cmp-pos: 0%;
  --cmp-ratio: 4 / 3;
  --cmp-before-position: 50% 50%;
  --cmp-after-position: 50% 50%;
  margin: 0;
}

/* Per-instance framing. The two cabin frames were shot at different aspect
   ratios, so the square "before" is anchored to the top of the stage — that
   lands the roofline at roughly the same height as the "after". */
.cmp--portrait {
  --cmp-ratio: 3 / 4;
}

.cmp--anchor-top {
  --cmp-before-position: 50% 0%;
}

.cmp__stage {
  position: relative;
  aspect-ratio: var(--cmp-ratio);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-primary-deep);
  /* Let vertical scrolling through the component keep working on touch while
     horizontal drags are captured by the handle. */
  touch-action: pan-y;
}

.cmp--live .cmp__stage {
  cursor: col-resize;
}

.cmp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cmp__img--after {
  object-position: var(--cmp-after-position);
}

.cmp__img--before {
  object-position: var(--cmp-before-position);
}

/* The wipe. clip-path keeps the "before" photograph at full stage size, so
   dragging reveals it rather than re-cropping it. */
.cmp__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0);
}

/* Side labels — never make the visitor guess which half is which. */
.cmp__tag {
  position: absolute;
  top: var(--space-3);
  z-index: 3;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(15, 36, 56, 0.88);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  pointer-events: none;
}

.cmp__tag--before {
  left: var(--space-3);
  opacity: 0;
  transition: opacity var(--transition);
}

.cmp--live .cmp__tag--before {
  opacity: 1;
}

.cmp__tag--after {
  right: var(--space-3);
  border-left: 3px solid var(--color-accent);
}

/* The handle */
.cmp__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cmp-pos);
  z-index: 4;
  width: 48px;
  margin-left: -24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: col-resize;
  touch-action: none;
}

.cmp--live .cmp__handle {
  display: flex;
}

/* The wipe line */
.cmp__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(15, 36, 56, 0.35);
}

.cmp__grip {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--color-accent);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  color: var(--color-white);
  box-shadow: 0 2px 12px rgba(15, 36, 56, 0.45);
  transition: transform var(--transition-fast);
}

.cmp__grip svg {
  display: block;
}

.cmp__handle:focus-visible {
  outline: none;
}

.cmp__handle:focus-visible .cmp__grip {
  outline: var(--focus-ring-width) solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(15, 36, 56, 0.55);
}

/* One-time "this is draggable" ring, fired when the slider first scrolls into
   view and cancelled the moment the visitor touches it. */
.cmp__grip::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.cmp--nudge .cmp__grip::after {
  animation: cmp-ping 1.9s var(--ease-out) 2;
}

@keyframes cmp-ping {
  0%   { opacity: 0.65; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.75); }
  100% { opacity: 0;    transform: scale(1.75); }
}

.cmp__caption {
  margin: var(--space-4) 0 0;
  font-size: var(--step-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.cmp__hint {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .cmp--live .cmp__stage:hover .cmp__grip {
    transform: scale(1.06);
  }
}

/* Side-by-side pair — used where two photographs document the same work but
   are shot from opposite ends, so a wipe would mislead rather than reveal. */
.cmp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.cmp-pair__item {
  position: relative;
  margin: 0;
}

.cmp-pair__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-primary-deep);
  cursor: zoom-in;
}

.cmp-pair__frame:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.cmp-pair__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cmp-pair figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cmp-pair__item--after figcaption {
  color: var(--color-accent-ink);
}


/* --------------------------------------------------------------------------
   3. .seq — project progression strip
   -------------------------------------------------------------------------- */

.seq {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: seq;
}

.seq__step {
  position: relative;
  counter-increment: seq;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: start;
  padding-bottom: var(--space-9);
}

.seq__step:last-child {
  padding-bottom: 0;
}

/* Spine track + the accent fill that draws itself as each step reveals. */
.seq__step::before,
.seq__step::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}

.seq__step::before {
  background: var(--color-border-soft);
}

.seq__step::after {
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.8s var(--ease-out);
}

.seq__step.visible::after {
  transform: scaleY(1);
}

.seq__step:last-child::before,
.seq__step:last-child::after {
  bottom: auto;
  height: 40px;
}

.seq__marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 8px var(--color-white);
}

.seq__marker::before {
  content: counter(seq, decimal-leading-zero);
}

/* Odd steps: photo left, copy right. Even steps: reversed. */
.seq__media {
  grid-row: 1;
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-primary-deep);
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
}

.seq__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.seq__media:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.seq__text {
  grid-row: 1;
  padding-top: var(--space-2);
}

.seq__step:nth-child(odd) .seq__media { grid-column: 1; justify-self: end; }
.seq__step:nth-child(odd) .seq__text  { grid-column: 3; padding-left: var(--space-2); }
.seq__step:nth-child(even) .seq__media { grid-column: 3; justify-self: start; }
.seq__step:nth-child(even) .seq__text  { grid-column: 1; padding-right: var(--space-2); text-align: right; }

.seq__stage {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-2);
}

.seq__title {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.seq__text p {
  font-size: var(--step-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 42ch;
}

.seq__step:nth-child(even) .seq__text p {
  margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
  .seq__media:hover img {
    transform: scale(1.04);
  }
}

/* The payoff panel that closes the sequence. */
.seq-payoff {
  margin-top: var(--space-9);
  padding: var(--space-8);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: center;
}

.seq-payoff__title {
  font-size: var(--step-3);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin: 0 0 var(--space-4);
}

.seq-payoff__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-glow);
  margin-bottom: var(--space-3);
}

.seq-payoff p {
  color: #D8E0E8;
  line-height: var(--leading-body);
  font-size: var(--step-sm);
  margin: 0;
  max-width: 44ch;
}

.seq-payoff .cmp__caption {
  color: #C3CDD8;
}

.seq-payoff .cmp__hint {
  color: var(--color-accent-glow);
}


/* --------------------------------------------------------------------------
   4. .work — asymmetric portfolio gallery
   --------------------------------------------------------------------------
   A ten-column grid with deliberately uneven spans and three different photo
   aspect ratios, so no two rows land on the same beat. Dense packing keeps
   the rhythm intact when the filter hides cards.
   -------------------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--grid-gap);
  /* Cards keep their natural height instead of stretching to match the
     tallest in the row — otherwise a short card next to a tall one opens a
     dead void inside its own border. */
  align-items: start;
}

.work-card {
  /* Overrides the site-wide .project-card card treatment: this page wants a
     flatter, more structural card than the soft rounded default. */
  grid-column: span 5;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.work-card--s4 { grid-column: span 4; }
.work-card--s5 { grid-column: span 5; }
.work-card--s6 { grid-column: span 6; }
.work-card--s10 { grid-column: span 10; }

.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-primary-deep);
  cursor: zoom-in;
}

.work-card--portrait .work-card__media { aspect-ratio: 3 / 4; }
.work-card--wide .work-card__media { aspect-ratio: 16 / 9; }
.work-card--pano .work-card__media { aspect-ratio: 21 / 9; }

.work-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.work-card__media:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* Photo count — always visible, including on touch. Never hover-gated. */
.work-card__count {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(15, 36, 56, 0.88);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  pointer-events: none;
}

.work-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.work-card__tag {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
}

.work-card__title {
  font-size: 1.1875rem;
  line-height: 1.28;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.work-card__body p {
  font-size: var(--step-sm);
  line-height: 1.62;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  max-width: 52ch;
  flex: 1;
}

/* One scrollable row rather than a wrapping block — keeps every photo in the
   DOM and keyboard-reachable while stopping a ten-photo job from making its
   card twice as tall as its neighbour. */
.work-card__thumbs {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin: auto 0 0;
  padding: var(--space-4) 0 2px;
  border-top: 1px solid var(--color-border-soft);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.work-card__thumbs li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.work-card__thumbs img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  cursor: zoom-in;
  background: var(--color-bg-light);
  transition: transform var(--transition), box-shadow var(--transition);
}

.work-card__thumbs img:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Full-width feature card: photo beside the copy rather than above it. */
.work-card--feature {
  flex-direction: row;
  align-items: stretch;
}

.work-card--feature .work-card__media {
  flex: 0 0 46%;
  aspect-ratio: auto;
}

.work-card--feature .work-card__body {
  padding: var(--space-8);
  justify-content: center;
}

.work-card--feature .work-card__title {
  font-size: var(--step-3);
}

@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }

  .work-card:hover .work-card__media img {
    transform: scale(1.045);
  }

  /* Corner-bracket reticle — a framing gesture rather than a glow. */
  .work-card__media::after {
    content: '';
    position: absolute;
    inset: 10px;
    z-index: 2;
    border: 2px solid var(--color-accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 100% 0 / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 0 100% / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 100% 100% / 18px 18px no-repeat;
            mask:
      linear-gradient(#000 0 0) 0 0 / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 100% 0 / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 0 100% / 18px 18px no-repeat,
      linear-gradient(#000 0 0) 100% 100% / 18px 18px no-repeat;
  }

  .work-card:hover .work-card__media::after,
  .work-card__media:focus-visible::after {
    opacity: 1;
  }

  .work-card__thumbs img:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-sm);
  }
}


/* --------------------------------------------------------------------------
   5. Filter controls
   -------------------------------------------------------------------------- */

/* Ranged left rather than centred, to sit with the editorial section intro.
   The buttons keep the site-wide .filter-tab treatment; only the container
   changes. */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: 0;
  border: 0;
}

.work-status {
  font-size: var(--step-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-7);
}


/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .seq__step {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
  }

  .seq__media {
    max-width: 290px;
  }
}

@media (max-width: 992px) {
  .ed-case,
  .ed-case--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .ed-case--flip .ed-case__text {
    order: 0;
  }

  .ed-case__text p,
  .ed-intro__lede {
    max-width: none;
  }

  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-card,
  .work-card--s4,
  .work-card--s5,
  .work-card--s6 {
    grid-column: span 1;
  }

  .work-card--s10 {
    grid-column: span 2;
  }

  .work-card__media,
  .work-card--portrait .work-card__media,
  .work-card--wide .work-card__media {
    aspect-ratio: 4 / 3;
  }

  .seq-payoff {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-7);
  }
}

@media (max-width: 768px) {
  .ed-rule {
    margin: var(--space-8) 0;
  }

  .ed-case + .ed-case {
    margin-top: var(--space-9);
  }

  .ed-specs li {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  /* Sequence collapses to a single left-anchored column with the spine
     running down the marker gutter. */
  .seq__step {
    grid-template-columns: 60px minmax(0, 1fr);
    padding-bottom: var(--space-8);
  }

  .seq__step::before,
  .seq__step::after {
    left: 26px;
  }

  .seq__marker {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 46px;
    height: 46px;
    font-size: 0.75rem;
    box-shadow: 0 0 0 6px var(--color-white);
  }

  .seq__step:nth-child(odd) .seq__media,
  .seq__step:nth-child(even) .seq__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    aspect-ratio: 4 / 3;
  }

  .seq__step:nth-child(odd) .seq__text,
  .seq__step:nth-child(even) .seq__text {
    grid-column: 2;
    grid-row: 2;
    padding: var(--space-4) 0 0;
    text-align: left;
  }

  .seq__step:nth-child(even) .seq__text p {
    margin-left: 0;
  }

  .seq__text p {
    max-width: none;
  }

  .work-card--feature {
    flex-direction: column;
  }

  .work-card--feature .work-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }

  .work-card--feature .work-card__body {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }

  .cmp__grip {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 620px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card,
  .work-card--s4,
  .work-card--s5,
  .work-card--s6,
  .work-card--s10 {
    grid-column: span 1;
  }

  .cmp-pair {
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .ed-specs li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .work-card__thumbs img {
    width: 46px;
    height: 46px;
  }
}


/* --------------------------------------------------------------------------
   7. Reduced motion + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .seq__step::after {
    transition: none;
    transform: scaleY(1);
  }

  .cmp--nudge .cmp__grip::after,
  .cmp__grip::after {
    animation: none;
    opacity: 0;
  }

  .cmp__grip,
  .work-card,
  .work-card__media img,
  .seq__media img,
  .work-card__thumbs img,
  .cmp__tag--before {
    transition: none;
  }

  .work-card:hover,
  .work-card:hover .work-card__media img,
  .seq__media:hover img,
  .work-card__thumbs img:hover,
  .cmp--live .cmp__stage:hover .cmp__grip {
    transform: none;
  }
}

@media print {
  .cmp__handle,
  .work-card__thumbs,
  .work-filters,
  .work-status {
    display: none !important;
  }

  /* Print the finished state, full width, with the label intact. */
  .cmp__clip {
    display: none;
  }

  .work-card,
  .seq__step,
  .ed-case {
    break-inside: avoid;
  }

  .seq-payoff {
    background: none;
    border: 1px solid #999;
  }

  .seq-payoff__title,
  .seq-payoff p,
  .seq-payoff .cmp__caption {
    color: #000;
  }
}