/* Figma Sites case study, with fluid grids instead of fixed canvas coordinates. */
#project.is-lure { background: #000; }
#project.is-lure .proj-topbar, #project.is-lure #projHeaderEl { display: none; }
.lure-study { --lure-width: 880px; color: #fff; background: #000; font-family: Arial, sans-serif; padding-bottom: 76px; }
.lure-study figure { margin: 0; min-width: 0; }
.lure-study img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lure-study h1, .lure-study h2 { font-size: 30px; line-height: 1.2; font-weight: 400; text-transform: uppercase; margin: 0 0 30px; }
.lure-study p { font-size: 13px; line-height: 24px; font-weight: 400; margin: 0; }
.lure-study p + p { margin-top: 14px; }
.lure-hero { width: 100%; aspect-ratio: 2020 / 514; min-height: 163px; }
.lure-hero img { min-height: 163px; }
.lure-centered { width: min(579px, calc(100% - 40px)); margin-inline: auto; }
.lure-intro { margin-top: 76px; text-align: center; }
.lure-intro h1 { margin-bottom: 24px; }
.lure-film-space { width: min(var(--lure-width), calc(100% - 40px)); aspect-ratio: 880 / 497; background: #d9d9d9; margin: 70px auto 76px; }
.lure-about { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'image copy'; }
.lure-about-image { grid-area: image; aspect-ratio: 16 / 9; }
.lure-about-copy { grid-area: copy; padding: 32px max(20px, calc((100vw - 880px) / 2)) 0 0; }
.lure-motion-pair { display: grid; grid-template-columns: 39.0625% 60.9375%; margin-top: -41px; }
.lure-flame { padding-top: 117px; }
.lure-flame img { height: auto; aspect-ratio: 16 / 9; }
.lure-motion { aspect-ratio: 2896 / 2160; }
.lure-process { display: grid; grid-template-columns: 1fr 1fr; margin-top: -108px; position: relative; }
.lure-process-copy { padding: 0 0 0 max(20px, calc((100vw - 880px) / 2)); }
.lure-side-blueprint { padding-top: 60px; align-self: end; }
.lure-side-blueprint img { height: auto; aspect-ratio: 2249 / 789; }
.lure-modeling { width: min(var(--lure-width), calc(100% - 40px)); margin: 66px auto 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'blueprint copy' 'blueprint sketch'; align-items: start; }
.lure-front-blueprint { grid-area: blueprint; aspect-ratio: 1048 / 1300; }
.lure-modeling-copy { grid-area: copy; padding-top: 21px; }
.lure-desktop-sketch { grid-area: sketch; width: 84%; margin-inline: auto !important; aspect-ratio: 1; }
.lure-campaign-copy { margin-top: 16px; }
.lure-campaign-gallery { width: min(var(--lure-width), calc(100% - 40px)); margin: 77px auto 0; display: grid; grid-template-columns: 580fr 281fr; gap: 20px; }
.lure-campaign-motion, .lure-campaign-gold { aspect-ratio: 16 / 9; }
.lure-campaign-gold { grid-row: 2; }
.lure-campaign-detail { grid-column: 2; grid-row: 1 / 3; min-height: 0; }
.lure-campaign-detail img { object-position: 58% center; }
.lure-tools { margin-top: 77px; text-align: center; }
.lure-tools h2 { margin-bottom: 24px; }
.lure-finish { width: min(279px, calc(100% - 80px)); aspect-ratio: 2367 / 730; margin: 140px auto 0 !important; }
.lure-mobile-opening, .lure-mobile-sketch, .lure-mobile-flame, .lure-mobile-motion { display: none; }
.proj-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
#worksGrid .proj-card, #worksGrid .proj-card.wide { grid-column: span 1; aspect-ratio: 4 / 3; }
/* Alternate wide tiles between the left and right side of each row. */
@media (min-width: 641px) {
  #homeGrid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
  #homeGrid .proj-card, #homeGrid .proj-card.wide { grid-column: span 1; aspect-ratio: 1; }
  #homeGrid .proj-card:nth-child(4n + 1), #homeGrid .proj-card:nth-child(4n + 4) { grid-column: span 2; aspect-ratio: 2 / 1; }
  #homeGrid .proj-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}
.project-grid .proj-card-meta { opacity: 1; transform: none; }
.project-grid .proj-card-title { font-size: clamp(1.15rem, 2.2vw, 2rem); }
.project-grid .proj-card-overlay { background: linear-gradient(transparent 35%, rgba(0,0,0,.75)); padding: 22px; }
@media (min-width: 1440px) {
  .lure-study { --lure-width: 1040px; }
  .lure-about-copy { padding-right: max(20px, calc((100vw - 1040px) / 2)); }
  .lure-process-copy { padding-left: max(20px, calc((100vw - 1040px) / 2)); }
  .lure-centered { width: min(680px, calc(100% - 40px)); }
  .lure-study p { font-size: 15px; line-height: 26px; }
  .lure-process { margin-top: -80px; }
}
@media (max-width: 1000px) {
  .lure-study h1, .lure-study h2 { font-size: 28px; }
  .lure-about-copy { padding: 20px 24px 20px; }
  .lure-process-copy { padding: 0 24px; }
  .lure-motion-pair { margin-top: 30px; }
  .lure-process { margin-top: 40px; }
  .lure-modeling { gap: 24px; }
}
@media (max-width: 640px) {
  .lure-study { padding-bottom: 60px; }
  .lure-study h1, .lure-study h2 { font-size: 30px; margin-bottom: 24px; }
  .lure-study p { font-size: 13px; line-height: 24px; }
  .lure-centered { width: calc(100% - 40px); }
  .lure-intro { margin-top: 40px; text-align: left; }
  .lure-film-space { margin-top: 50px; margin-bottom: 50px; }
  .lure-mobile-opening { display: grid; gap: 50px; width: calc(100% - 40px); margin: 0 auto 50px; }
  .lure-mobile-opening img { aspect-ratio: 16 / 9; height: auto; }
  .lure-about { display: flex; flex-direction: column; }
  .lure-about-copy { padding: 0 20px; }
  .lure-about-image { width: 100%; margin-top: 50px !important; }
  .lure-motion-pair { display: none; }
  .lure-process { display: flex; flex-direction: column; margin: 50px 20px 0; }
  .lure-process-copy { padding: 0; }
  .lure-side-blueprint { display: none; }
  .lure-mobile-sketch { display: block; aspect-ratio: 1; margin-top: 35px !important; }
  .lure-modeling { display: flex; flex-direction: column; gap: 0; margin-top: 35px; }
  .lure-modeling-copy { padding: 0; order: 0; }
  .lure-modeling::after { content: ''; display: block; width: 100%; aspect-ratio: 2249 / 789; background: url('/assets/lure/side-blueprint.jpg') center / contain no-repeat; order: 1; margin-top: 40px; }
  .lure-front-blueprint { width: 53%; order: 2; margin: 0 auto !important; }
  .lure-desktop-sketch { display: none; }
  .lure-campaign-copy { margin-top: 50px; }
  .lure-campaign-gallery { display: flex; flex-direction: column; gap: 50px; margin-top: 40px; }
  .lure-campaign-gold, .lure-campaign-detail { display: none; }
  .lure-mobile-flame, .lure-mobile-motion { display: block; }
  .lure-mobile-flame { aspect-ratio: 16 / 9; }
  .lure-mobile-motion { aspect-ratio: 2896 / 2160; }
  .lure-tools { width: calc(100% - 80px); margin-top: 50px; text-align: left; }
  .lure-tools p { font-size: 15px; }
  .lure-finish { width: 214px; margin-top: 50px !important; }
}
@media (prefers-reduced-motion: reduce) { .proj-card-bg { transition: none; } }