/* Shared components: chips, badges, play badge, photo overlay cards, scroll reveal. */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink); border: 1px solid transparent; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
button.chip { min-height: 44px; padding: 0 20px; font-size: 15px; cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease); }
button.chip:hover { background: #E8E7E1; }
button.chip.is-active { background: var(--forest); color: #fff; }
.chip-white { background: rgba(255, 255, 255, .94); color: var(--ink); }
.chip-soon { background: var(--surface-2); color: var(--ink-2); min-height: 26px; padding: 0 10px; font-size: 12px; }
.badge { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; }

.section { padding: clamp(44px, 6vw, 88px) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(28px, 4vw, 48px); }

/* decorative play badge: dark disc with a lime triangle */
.play { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(14, 15, 18, .66); color: var(--lime); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.play svg { width: 14px; height: 14px; margin-left: 2px; }

/* "Example" / caption tag on photos */
.mcard-tag { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(14, 15, 18, .62); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* dark frosted card, only ever on top of photography */
.mcard { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; border-radius: var(--r-md); background: var(--photo-card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.mcard-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mcard-head strong { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.mcard-head span { font-size: 15px; color: rgba(255, 255, 255, .86); font-weight: 400; font-variant-numeric: tabular-nums; }
.mcard-media { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 2.6 / 1; background: var(--forest-2); }
.mcard-media img { width: 100%; height: 100%; object-fit: cover; }
.mcard-media .play { left: 10px; bottom: 10px; width: 32px; height: 32px; }
.mcard-media .play svg { width: 12px; height: 12px; }

/* scroll reveal: hidden states only exist when JS marked the page */
.js-reveal [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--rv-d, 0ms); }
.js-reveal [data-rv].is-in { opacity: 1; transform: none; }