@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&display=swap');

:root { color-scheme: light; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: #e1e1e1; color: #1d1d1d; font-family: 'Inter Tight', Arial, sans-serif; font-size: 16px; }
a { color: #19698f; text-decoration: none; }
a:hover { color: #1d79a4; }
a:focus-visible { outline: 3px solid #19698f; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header, .intro, .portfolio, .site-footer { width: min(100% - 40px, 736px); margin-inline: auto; }
.site-header { padding-top: 40px; }
.logo { display: block; width: 120px; max-width: 70%; height: auto; filter: brightness(.1); margin-bottom: 24px; }
.intro { margin-bottom: 15px; }
.intro p { max-width: 550px; margin: 0; font-size: .85rem; line-height: 1.5; font-weight: 300; }
.portfolio { margin-bottom: 50px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; }
.item { min-width: 0; }
.item a { display: block; }
.item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #222; }
.item h2 { font-size: 1.2rem; font-weight: 400; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 8px 0 12px; }
.video-title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 1.2rem; font-weight: 400; }
.back-link { display: inline-flex; color: #777; align-items: center; justify-content: center; flex: none; }
.back-link:hover { color: #1d1d1d; }
.back-link svg { width: 20px; height: 20px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-footer { text-align: center; padding: 0 0 45px; }
.awards { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 10px; }
.awards img { filter: brightness(.2); height: 30px; width: auto; }
.site-footer p { margin: 0; color: #777; font-size: .7rem; }
@media (min-width: 768px) {
  .site-header, .intro, .portfolio { width: min(100% - 80px, 736px); }
  .intro p { width: 66.666%; }
}
@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 420px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .item h2 { margin-bottom: 20px; }
}