/* GENERATED from project.css (content rules scoped under .proj) for the microsite bottom sheet. */
.proj .wrap {position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);}
.proj .p-hero {padding-top: clamp(120px, 20vh, 220px); padding-bottom: clamp(28px, 5vh, 56px);}
.proj .p-eyebrow {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: clamp(18px, 3vh, 30px);
  font: 600 11px/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);}
.proj .p-eyebrow .dot {color: var(--acid);}
.proj .p-eyebrow .p-marker {display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1.5px solid var(--acid); border-radius: 50%; color: var(--acid); font-size: 12px;}
.proj .title {position: relative; display: inline-block; isolation: isolate;
  margin: 0; font-family: var(--f-poster); font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 6.5rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  color: #000; padding: 0.06em 0.26em 0.03em; transform: rotate(-1.8deg);}
.proj .title::before {content: ""; position: absolute; inset: 0.06em -0.02em 0.04em; z-index: -1; background: var(--paper);
  clip-path: polygon(0.0% 6.2%,2.8% 2.6%,5.6% 8.4%,8.3% 5.6%,11.1% 0.4%,13.9% 4.5%,16.7% 0.9%,19.4% 6.9%,22.2% 2.7%,25.0% 3.6%,27.8% 6.5%,30.6% 2.6%,33.3% 2.1%,36.1% 1.9%,38.9% 4.0%,41.7% 0.3%,44.4% 8.0%,47.2% 6.0%,50.0% 3.8%,52.8% 7.2%,55.6% 3.7%,58.3% 8.0%,61.1% 1.9%,63.9% 1.3%,66.7% 5.5%,69.4% 7.8%,72.2% 2.8%,75.0% 6.4%,77.8% 6.6%,80.6% 1.4%,83.3% 1.1%,86.1% 6.6%,88.9% 7.5%,91.7% 1.2%,94.4% 8.5%,97.2% 2.5%,100.0% 4.7%,100.0% 95.3%,97.2% 95.1%,94.4% 98.6%,91.7% 91.2%,88.9% 93.1%,86.1% 99.1%,83.3% 93.1%,80.6% 94.3%,77.8% 98.6%,75.0% 93.7%,72.2% 98.8%,69.4% 93.0%,66.7% 98.8%,63.9% 99.5%,61.1% 91.5%,58.3% 98.3%,55.6% 99.1%,52.8% 94.0%,50.0% 94.1%,47.2% 95.4%,44.4% 94.1%,41.7% 99.0%,38.9% 92.2%,36.1% 98.8%,33.3% 91.8%,30.6% 95.6%,27.8% 91.7%,25.0% 93.4%,22.2% 95.6%,19.4% 93.2%,16.7% 97.8%,13.9% 96.7%,11.1% 94.5%,8.3% 94.2%,5.6% 91.2%,2.8% 91.7%,0.0% 97.9%);}
.proj .title .ink2 {color: var(--acid);}
.proj .lede {margin: clamp(22px, 4vh, 40px) 0 0; max-width: 62ch;
  font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; color: var(--muted);}
.proj .p-tags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 3.5vh, 34px);}
.proj .p-tag {padding: 6px 11px 5px; border: 1px solid var(--hair); background: rgba(255,255,255,0.02);
  font: 600 10px/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);}
.proj .media {margin: clamp(32px, 6vh, 72px) 0;}
.proj .media video, .proj .media img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--hair);}
.proj .media.tall img {aspect-ratio: auto;}
.proj .media-cap {margin: 14px 0 0; max-width: 60ch; font-size: clamp(0.92rem, 1.3vw, 1.05rem); line-height: 1.7; color: var(--muted);}
.proj .p-cta {display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  padding: 13px 22px 12px; background: var(--acid); color: #000; cursor: pointer;
  font: 700 12px/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;}
.proj .p-cta:hover {transform: translateY(-2px); box-shadow: 0 10px 28px rgba(204, 255, 0, 0.22);}
.proj .p-cta.ghost {background: transparent; color: var(--acid); box-shadow: inset 0 0 0 1.5px var(--acid);}
.proj .p-cta.ghost:hover {box-shadow: inset 0 0 0 1.5px var(--acid), 0 10px 28px rgba(204, 255, 0, 0.12);}
.proj .p-cta svg {width: 15px; height: 15px;}
.proj .sec {padding: clamp(36px, 7vh, 88px) 0; border-top: 1px solid var(--hair);}
.proj .sec-k {margin: 0 0 clamp(16px, 2.5vh, 26px); display: flex; align-items: baseline; gap: 14px;
  font: 600 11px/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);}
.proj .sec-k b {color: var(--acid); font-weight: 600;}
.proj .sec h2 {margin: 0 0 18px; font-family: var(--f-head); font-weight: 900; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em;}
.proj .sec p {margin: 0 0 16px; max-width: 64ch; color: var(--muted); font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.75;}
.proj .meta {display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: clamp(26px, 4vh, 44px);}
.proj .meta div {background: var(--ink); padding: 18px 20px;}
.proj .meta dt {margin: 0 0 8px; font: 600 10px/1 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);}
.proj .meta dd {margin: 0; font-size: 14px; color: var(--paper); line-height: 1.5;}
.proj .outcomes {display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: clamp(20px, 3vh, 32px);}
.proj .oc {border: 1px solid var(--hair); padding: 20px; background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);}
.proj .oc .ov {font-family: var(--f-head); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--acid); line-height: 1;}
.proj .oc .ol {margin: 10px 0 8px; font: 600 10px/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);}
.proj .oc .od {margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55;}
.proj .gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: clamp(20px, 3vh, 32px);}
.proj .gallery a {position: relative; overflow: hidden; border: 1px solid var(--hair); background: #000;}
.proj .gallery img {width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease;}
.proj .gallery a:hover img {transform: scale(1.04);}
.proj .gallery .wide {grid-column: span 2;}
.proj .gallery .wide img {aspect-ratio: 16 / 9;}
.proj .vpair {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: clamp(20px, 3vh, 32px);}
.proj .vpair figure {margin: 0;}
.proj .vpair video {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--hair);}
.proj .vpair figcaption {margin-top: 9px; font: 600 10px/1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);}
.proj .p-foot {position: relative; z-index: 2; border-top: 1px solid var(--hair); margin-top: clamp(40px, 8vh, 110px); padding: clamp(40px, 7vh, 84px) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;}
.proj .p-foot .home {display: inline-flex; align-items: center;}
.proj .p-foot .home svg {width: 44px; height: 44px; display: block;}
.proj .p-foot small {font: 600 10px/1.4 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); text-align: right;}
@media (max-width: 680px) {
  .proj .gallery {grid-template-columns: 1fr;}
  .proj .gallery .wide {grid-column: span 1;}
  .proj .gallery img, .proj .gallery .wide img {aspect-ratio: 16 / 10;}
}
@media (prefers-reduced-motion: reduce) {
  .proj .p-cta, .proj .gallery img {transition: none;}
}