@import url('/booko-cards.css');
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The original homepage mosaic: the project slots retain their original sizes. */
.home-grid {
  display: grid; position: relative; width: 100%; max-width: 2200px;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); gap: 16px;
  aspect-ratio: 1.9871; padding: 0 24px;
}
.home-grid--one { grid-template-rows: repeat(2,minmax(min-content,1fr)); }
.home-grid--one .slot-1 { grid-area: 1 / 1 / 3 / 3; }
.home-grid--one .slot-2 { grid-area: 1 / 3 / 2 / 4; }
.home-grid--one .slot-3 { grid-area: 1 / 4 / 2 / 5; }
.home-grid--one .slot-4 { grid-area: 1 / 5 / 2 / 6; }
.home-grid--one .about-card { grid-area: 2 / 3 / 3 / 5; }
.home-grid--one .studio-stats { grid-area: 2 / 5 / 3 / 6; }
@media (min-width:1280px) {
  .home-grid--one { aspect-ratio: auto; min-height: calc(min(100vw,2200px) / 1.9871); }
}
.home-grid--two, .home-grid--three { padding-top: 20px; }
.home-grid--two .slot-1 { grid-area: 1 / 1 / 3 / 2; }
.home-grid--two .slot-2 { grid-area: 1 / 2 / 5 / 4; }
.home-grid--two .slot-3 { grid-area: 1 / 4 / 5 / 6; }
.home-grid--two .slot-4 { grid-area: 3 / 1 / 5 / 2; }
.home-grid--three .slot-1 { grid-area: 1 / 1 / 5 / 3; }
.home-grid--three .slot-2 { grid-area: 1 / 3 / 3 / 4; }
.home-grid--three .slot-3 { grid-area: 1 / 4 / 5 / 6; }
.home-grid--three .slot-4 { grid-area: 3 / 3 / 5 / 4; }
.report-feature { padding: 0 24px 20px; }
.report-feature .project-card { height: min(580px, 47vw); background: #080808; }
.report-feature .card-image img { object-fit: cover; }
.work-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0 24px 80px; }
.work-grid > .project-card { aspect-ratio: .750469; }
.work-intro { padding: 20px; display: flex; flex-direction: column; gap: 40px; justify-content: center; }
.work-intro h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.04em; }
.work-intro p { font-size: 20px; line-height: 1.3; max-width: 360px; }
.project-intro { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; padding: 80px 24px 40px; }
.project-heading h1 { font-size: 56px; line-height: 1.1; letter-spacing: -.04em; }
.project-heading > p { margin-top: 12px; }
.project-description { color: #e6e4debf; }
.project-description p { margin-bottom: 24px; }
.project-gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; padding: 40px 24px 0; margin-bottom: 64px; }
.gallery-image { border-radius: 8px; overflow: hidden; background: #080808; display: flex; align-items: center; margin: 0; }
.gallery-image img { width: 100%; height: auto; object-fit: contain; }
.gallery-image--cover-scene { grid-column: span 7; }
.gallery-image--intro-detail { grid-column: span 5; }
.gallery-image--third { grid-column: span 4; }
@media (min-width:810px) {
  .gallery-image--third { position: relative; }
  .gallery-image--third:nth-child(3) img,
  .gallery-image--third:nth-child(5) img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
}
@media (min-width:810px) and (max-width:1279.98px) {
  .home-grid { aspect-ratio: auto; height: 1000px; grid-template-columns: repeat(3,minmax(120px,1fr)); grid-template-rows: repeat(4,minmax(0,1fr)); }
  .home-grid.home-grid > * { grid-area: auto; }
  .home-grid--one .slot-1 { grid-area: span 4 / span 2; }
  .home-grid--one .slot-2, .home-grid--one .slot-3, .home-grid--one .slot-4 { grid-row: span 4; }
  .home-grid--one .about-card { grid-area: span 4 / span 2; }
  .home-grid--one .studio-stats { grid-area: span 3 / 1 / auto / -1; }
  .home-grid--two .slot-1, .home-grid--two .slot-4 { grid-row: span 4; }
  .home-grid--two .slot-2, .home-grid--two .slot-3 { grid-area: span 4 / span 2; }
  .home-grid--three .slot-1, .home-grid--three .slot-3 { grid-area: span 4 / span 2; }
  .home-grid--three .slot-2, .home-grid--three .slot-4 { grid-row: span 4; }
  .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-intro { grid-template-columns: 1fr; gap: 40px; }
  .project-description { max-width: 740px; }
}
@media (max-width:809.98px) {
  .home-grid { padding: 0 12px; gap: 12px; grid-template-columns: repeat(2,minmax(120px,1fr)); aspect-ratio: .229412; }
  .home-grid--one { grid-template-rows: repeat(11,minmax(0,1fr)); }
  .home-grid--one .slot-1 { grid-area: 1 / 1 / 4 / 3; }
  .home-grid--one .slot-2 { grid-area: 4 / 1 / 7 / 2; }
  .home-grid--one .studio-stats { grid-area: 4 / 2 / 7 / 3; }
  .home-grid--one .slot-3 { grid-area: 7 / 1 / 9 / 2; }
  .home-grid--one .slot-4 { grid-area: 7 / 2 / 9 / 3; }
  .home-grid--one .about-card { grid-area: 9 / 1 / 12 / 3; }
  .home-grid--two, .home-grid--three { grid-template-rows: repeat(8,minmax(0,1fr)); padding-top: 20px; }
  .home-grid--two { aspect-ratio: auto; height: 1700px; }
  .home-grid--two .slot-2 { grid-area: 1 / 1 / 4 / 3; }
  .home-grid--two .slot-1 { grid-area: 4 / 1 / 6 / 2; }
  .home-grid--two .slot-4 { grid-area: 4 / 2 / 6 / 3; }
  .home-grid--two .slot-3 { grid-area: 6 / 1 / 9 / 3; }
  .home-grid--three .slot-1 { grid-area: 1 / 1 / 4 / 3; }
  .home-grid--three .slot-2 { grid-area: 4 / 1 / 6 / 2; }
  .home-grid--three .slot-4 { grid-area: 4 / 2 / 6 / 3; }
  .home-grid--three .slot-3 { grid-area: 6 / 1 / 9 / 3; }
  .report-feature { padding: 0 12px 12px; }
  .report-feature .project-card { height: auto; aspect-ratio: .9; }
  .work-grid { grid-template-columns: 1fr; padding: 60px 12px 80px; gap: 12px; }
  .work-intro { min-height: 250px; }
  .project-intro { grid-template-columns: 1fr; gap: 40px; padding: 140px 12px 40px; }
  .project-heading h1 { font-size: 48px; }
  .project-gallery { grid-template-columns: 1fr; gap: 12px; padding: 0 12px; }
  .gallery-image { grid-column: 1; }
}