@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("media/lapride/fonts/montserrat-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("media/lapride/fonts/space-mono-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("media/lapride/fonts/space-mono-bold.woff2") format("woff2");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #eceae3; }
a { color: #1b2bff; }
a:hover { color: #0b0b0c; }
::selection { background: #1b2bff; color: #eceae3; }

@keyframes lm-rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-container { max-width: 1180px; margin-left: auto; margin-right: auto; }
.back-to-work { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid rgba(11, 11, 12, .24); border-radius: 999px; font-family: "Space Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #0b0b0c; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.back-to-work-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1b2bff; color: #eceae3; font-size: 16px; line-height: 1; transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .25s ease, color .25s ease; }
.back-to-work:hover { background: #0b0b0c; color: #eceae3; border-color: #0b0b0c; }
.back-to-work:hover .back-to-work-arrow { transform: translateX(-3px); background: #eceae3; color: #1b2bff; }
.back-to-work:focus-visible { outline: 2px solid #1b2bff; outline-offset: 3px; }
.project-info { display: grid; grid-template-columns: minmax(220px, .7fr) 1.6fr; gap: 48px; max-width: 1180px; }
.project-copy { border-left: 1px solid rgba(11, 11, 12, .16); padding-left: 48px; }
.lp-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-3up { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.lp-4up { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-feature { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.lp-info { display: grid; grid-template-columns: .36fr .64fr; gap: 14px; align-items: start; }
.lp-info > img { align-self: stretch; }
.tp-head { display: grid; grid-template-columns: minmax(220px, .7fr) 1.6fr; gap: 48px; max-width: 1180px; }
.tp-copy { border-left: 1px solid rgba(11, 11, 12, .16); padding-left: 48px; }
.section-label { font-family: "Space Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #1b2bff; margin-bottom: 14px; }
.media-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-family: "Space Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6a6a6c; }
.ribbon-rail { position: fixed; top: 0; left: 0; height: 100vh; width: min(calc((100vw - 1180px) / 2), 360px); pointer-events: none; z-index: 0; display: none; }
.ribbon-rail svg { display: block; width: 100%; height: 100%; overflow: visible; clip-path: inset(-100vh -100vw 0 -100vw); }
.mobile-ribbon-slot { display: none; }
.next-project-link:hover { padding-left: 16px !important; }

@media (min-width: 1520px) {
  .ribbon-rail { display: block; }
}

@media (max-width: 760px) {
  .project-info, .tp-head { grid-template-columns: 1fr; gap: 28px; }
  .project-copy, .tp-copy { border-left: 0; padding-left: 0; }
  .lp-3up, .lp-4up { grid-template-columns: 1fr 1fr; }
  .lp-info { grid-template-columns: 1fr; }
  .lp-info > img { aspect-ratio: 2 / 3; }
  .lp-feature { grid-template-columns: 1fr; }
  .lp-feature > *:first-child { grid-row: auto; aspect-ratio: 4 / 5; }
  .big-idea-section { position: relative; }
  .mobile-ribbon-slot { display: block; position: absolute; top: -96px; left: 0; right: 0; height: 78px; overflow: hidden; pointer-events: none; z-index: 2; background: #eceae3; }
  .mobile-ribbon-slot svg { display: block; width: calc(100% + 76px); height: 88px; margin-left: -38px; overflow: visible; }
  .mobile-ribbon-copy { fill: #fff; fill-opacity: .5; font-family: "Montserrat", "Helvetica Neue", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; dominant-baseline: central; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}