:root { --paper: #f1efe8; --ink: #171714; --acid: #d7ff45; --orange: #ff5c35; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #f4ff45 0%, #ff9d38 50%, #ed2b24 100%); font-family: "Manrope", sans-serif; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; z-index: 20; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.work-section { min-height: 100vh; padding: 125px 6vw 55px; display: flex; flex-direction: column; justify-content: space-between; scroll-snap-align: start; overflow: hidden; }
.theme-acid { background: linear-gradient(180deg, #f4ff45 0%, #ffd13e 100%); }
.theme-dark { color: var(--ink); background: linear-gradient(180deg, #ffd13e 0%, #ff7938 100%); }
.theme-orange { background: linear-gradient(180deg, #ff7938 0%, #ed2b24 100%); }
.section-intro { display: grid; grid-template-columns: 1fr 4fr; align-items: end; margin-bottom: 3rem; }
.section-intro .index, .section-intro p { font: 400 .67rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.section-intro p { margin: 0 0 1rem; }
.section-intro h1, .section-intro h2 { margin: 0; font-size: clamp(3.8rem, 9vw, 8.2rem); line-height: .82; letter-spacing: -.075em; font-weight: 500; }
.carousel { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 940px); gap: 1.3rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.video-card { scroll-snap-align: start; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #292925; }
.video-frame video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-placeholder { position: absolute; z-index: 1; inset: 0; padding: 2rem; display: flex; align-items: center; justify-content: center; color: var(--paper); background: repeating-linear-gradient(135deg, #242420 0, #242420 2px, #2d2d28 2px, #2d2d28 12px); }
.video-placeholder::before { content: ""; width: 72px; height: 72px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 42%, currentColor 43% 58%, transparent 59%); opacity: .55; }
.video-placeholder b { position: absolute; top: 1.5rem; left: 1.5rem; font: 400 .7rem "DM Mono", monospace; }
.video-placeholder span { position: absolute; bottom: 1.5rem; right: 1.5rem; font: 400 .65rem "DM Mono", monospace; text-transform: uppercase; }
.video-card p { margin: .9rem 0 0; display: flex; justify-content: space-between; gap: 1rem; }
.video-card p span { font-weight: 600; }
.video-card small { font: 400 .65rem "DM Mono", monospace; text-transform: uppercase; }
.carousel-button { position: absolute; z-index: 5; top: 42%; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--ink); background: var(--paper); font-size: 1.2rem; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.carousel-button:hover { transform: scale(1.08); background: var(--acid); }
.previous { left: -25px; }
.next { right: -25px; }
.carousel-button:disabled { opacity: .25; cursor: default; transform: none; }
@media (max-width: 760px) {
  .work-section { min-height: 100svh; padding: 105px 5vw 45px; }
  .section-intro { display: block; }
  .section-intro .index { display: block; margin-bottom: 2rem; }
  .section-intro h1, .section-intro h2 { font-size: clamp(3.4rem, 17vw, 5.7rem); }
  .carousel-track { grid-auto-columns: 88vw; }
  .carousel-button { width: 42px; height: 42px; }
  .previous { left: -8px; }
  .next { right: -8px; }
  .video-card p { align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }