:root {
  --paper-blue: #62c9f7;
  --yellow: #ffda0d;
  --ink: #f7f5ed;
  --futura: "Futura PT", "Jost", Futura, "Avenir Next", Avenir, "Century Gothic", sans-serif;
  --texture: url("assets/blue-paper-texture.webp");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--paper-blue);
  background-image: linear-gradient(rgba(24, 158, 235, .15), rgba(24, 158, 235, .15)), var(--texture);
  background-blend-mode: color, normal;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--futura);
  text-shadow: 0 2px 6px rgba(6, 35, 49, .28);
}

body::before {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: #58bff0;
  content: "";
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
}

body.is-ready::before { opacity: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.work-film-background,
.work-grain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.work-film-background { z-index: 100; }
.work-film-matte { width: 100%; height: 100%; opacity: .68; object-fit: fill; mix-blend-mode: multiply; }

.work-grain {
  z-index: 200;
  background: rgba(255, 255, 255, .001);
  -webkit-backdrop-filter: saturate(1.3) contrast(1.018);
  backdrop-filter: saturate(1.3) contrast(1.018);
}

.work-grain::after {
  position: absolute;
  inset: 0;
  background: url("assets/s16-fine-grain-frame.webp") center / cover no-repeat;
  content: "";
  opacity: .22;
  mix-blend-mode: soft-light;
}

.work-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  padding: clamp(38px, calc(20px + 2.5vw), 72px) clamp(38px, calc(26px + 3vw), 96px);
  pointer-events: none;
}

.work-brand {
  display: inline-block;
  color: var(--yellow);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  pointer-events: auto;
  transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.work-brand:hover,
.work-brand:focus-visible { opacity: .72; transform: translateY(-2px); }

.work-main { position: relative; z-index: 2; }

.work-masthead {
  display: grid;
  min-height: 390px;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 110px 30px 70px;
  text-align: center;
}

.work-masthead h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6.5vw, 94px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .85;
  text-transform: uppercase;
}

.work-masthead h1 span { color: var(--yellow); white-space: nowrap; }

.work-return-link {
  min-width: 260px;
  padding: 11px 28px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.work-return-link:hover,
.work-return-link:focus-visible { color: #111; background: var(--yellow); transform: translateY(-2px); }

.work-grid {
  display: grid;
  width: min(calc(100% - 48px), 1005px);
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.work-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #111;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .14), 0 11px 26px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), transform 560ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), box-shadow 480ms cubic-bezier(.22, 1, .36, 1);
  content-visibility: auto;
  contain-intrinsic-size: 330px 330px;
}

.work-card.is-visible { opacity: 1; transform: none; }

.work-card-image,
.work-card-details { position: absolute; inset: 0; }

.work-card-image {
  height: 100%;
  object-fit: cover;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1), transform 760ms cubic-bezier(.16, 1, .3, 1);
}

.work-card-normal { opacity: 1; transform: scale(1); }
.work-card-rollover { opacity: 0; transform: scale(1.055); }

.work-card-details {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  background: rgba(80, 80, 80, .54);
  text-align: center;
  transition: opacity 440ms cubic-bezier(.22, 1, .36, 1), background-color 440ms ease;
}

.work-card-details > span {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(14px) scale(.985);
  transition: opacity 400ms ease, filter 500ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1);
}

.work-card-details h2 {
  margin: 0;
  color: #eee;
  font-size: clamp(26px, 3.7vw, 50px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}

.work-card-details p { margin: 12px 0 0; color: #eee; font-size: 18px; }

.work-card:hover,
.work-card:focus-visible {
  z-index: 5;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .24), 0 30px 54px rgba(0, 0, 0, .36);
  transform: translate3d(0, -11px, 0) scale(1.012);
}
.work-card:hover .work-card-normal,
.work-card:focus-visible .work-card-normal { opacity: 0; transform: scale(.98); }
.work-card:hover .work-card-rollover,
.work-card:focus-visible .work-card-rollover { opacity: 1; transform: scale(1); }
.work-card:hover .work-card-details,
.work-card:focus-visible .work-card-details { opacity: 1; }
.work-card:hover .work-card-details > span,
.work-card:focus-visible .work-card-details > span { opacity: 1; filter: none; transform: none; }
.work-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.work-footer {
  position: relative;
  z-index: 2;
  padding: 55px 24px 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.work-noscript { position: relative; z-index: 2; padding: 50px; text-align: center; }

@media (max-width: 768px) {
  body { background-attachment: scroll; }
  .work-masthead { min-height: 340px; padding-bottom: 55px; }
  .work-grid { width: min(calc(100% - 32px), 680px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card-details h2 { font-size: clamp(25px, 6vw, 42px); }
}

@media (max-width: 540px) {
  .work-grid { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 12px; }
  .work-masthead { min-height: 315px; padding-top: 105px; }
  .work-card-details h2 { font-size: clamp(34px, 11vw, 52px); }
}

@media (hover: none) {
  .work-card-details {
    align-items: flex-end;
    justify-content: flex-start;
    opacity: 1;
    background: linear-gradient(transparent 48%, rgba(0, 0, 0, .72));
    text-align: left;
  }
  .work-card-details h2 { font-size: clamp(22px, 6vw, 34px); }
  .work-card-details p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:not([data-motion="on"]) .work-card { opacity: 1; transform: none; transition: none; }
  body:not([data-motion="on"]) .work-card-image,
  body:not([data-motion="on"]) .work-card-details,
  body:not([data-motion="on"]) .work-card-details > span,
  body:not([data-motion="on"]) .work-return-link { transition: none; }
}