:root {
  --projects-bg: #f4f5f2;
  --projects-ink: #192b4e;
  --projects-gutter: clamp(20px, 4vw, 64px);
}

body.projects-page { margin: 0; overflow-x: clip; background: var(--projects-bg); color: var(--projects-ink); }
.projects-page *, .projects-page *::before, .projects-page *::after { box-sizing: border-box; }
.projects-page img { display: block; max-width: 100%; }
.projects-topbar-inner { padding-inline: var(--projects-gutter); }
.projects-intro, .projects-board { width: min(calc(100% - (var(--projects-gutter) * 2)), 1200px); margin-inline: auto; }
.projects-intro { padding: clamp(78px, 10vw, 150px) 0 clamp(58px, 8vw, 110px); }
.projects-intro h1 { margin: 0; font-size: clamp(4rem, 10vw, 9rem); font-weight: 700; letter-spacing: -.07em; line-height: .84; text-transform: uppercase; }

.projects-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 1.45vw, 28px); padding-bottom: clamp(100px, 13vw, 180px); align-items: start; }
.projects-board figure { position: relative; min-width: 0; margin: 0; }
.projects-board figure:nth-child(1) { grid-column: 1 / 13; }
.projects-board figure:nth-child(2) { grid-column: 1 / 6; }
.projects-board figure:nth-child(3) { grid-column: 6 / 13; }
.projects-board figure:nth-child(4) { grid-column: 1 / 7; }
.projects-board figure:nth-child(5) { grid-column: 7 / 13; }
.projects-board figure:nth-child(6) { grid-column: 1 / 9; }
.projects-board figure:nth-child(7) { grid-column: 9 / 13; }
.projects-board figure:nth-child(8) { grid-column: 1 / 13; }
.projects-board figure:nth-child(9) { grid-column: 1 / 6; }
.projects-board figure:nth-child(10) { grid-column: 6 / 13; }
.projects-board figure:nth-child(11) { grid-column: 1 / 8; }
.projects-board figure:nth-child(12) { grid-column: 8 / 13; }
.project-image { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.project-image img { width: 100%; height: auto; }
.projects-board figcaption { position: absolute; right: 16px; bottom: 14px; left: 16px; color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .1em; line-height: 1.35; opacity: 0; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.55); text-transform: uppercase; transition: opacity .18s ease; }
.projects-board figure:hover figcaption, .projects-board figure:focus-within figcaption { opacity: 1; }
.projects-board figcaption span, .projects-board figcaption small { display: block; }
.projects-board figcaption small { margin-top: 3px; font: inherit; font-weight: 500; opacity: .78; }

dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; border: 0; padding: 28px; background: rgba(244,245,242,.98); }
dialog::backdrop { background: rgba(244,245,242,.98); }
.projects-lightbox { display: grid; width: 100%; height: 100%; place-items: center; pointer-events: none; }
.projects-lightbox img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; pointer-events: auto; }
.projects-lightbox-caption { position: fixed; right: 24px; bottom: 14px; left: 24px; margin: 0; color: var(--projects-ink); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.projects-lightbox-control { position: fixed; border: 0; padding: 10px; background: transparent; color: var(--projects-ink); font: 400 30px/1 Arial, sans-serif; cursor: pointer; }
.projects-lightbox-close { top: 18px; right: 20px; font-size: 38px; }
.projects-lightbox-prev { top: 50%; left: 18px; transform: translateY(-50%); }
.projects-lightbox-next { top: 50%; right: 18px; transform: translateY(-50%); }

@media (max-width: 700px) {
  :root { --projects-gutter: 19px; }
  .projects-intro { padding: 58px 0 52px; }
  .projects-intro h1 { font-size: clamp(3.7rem, 17vw, 5.8rem); }
  .projects-board { display: flex; flex-direction: column; gap: 42px; }
  .projects-board figure { width: 100%; }
  .projects-board figure:nth-child(4), .projects-board figure:nth-child(7), .projects-board figure:nth-child(9) { width: 86%; }
  .projects-board figure:nth-child(7) { align-self: flex-end; }
  .project-image { cursor: zoom-in; }
  .projects-board figcaption { position: static; margin-top: 9px; color: var(--projects-ink); font-size: .62rem; opacity: 1; text-shadow: none; }
  .projects-board figcaption small { opacity: .62; }
  dialog { padding: 16px; }
  .projects-lightbox img { max-width: 88vw; max-height: 78vh; }
  .projects-lightbox-close { top: 10px; right: 10px; }
  .projects-lightbox-prev { left: 4px; }
  .projects-lightbox-next { right: 4px; }
}