/* Bird's Eye Blues Productions */

:root {
  --paper: #ffffff;
  --ink: #1e1e20;
  --blue: #1fa9e2;
  --dim: #7a7d84;
  --wash: #f4f9fc;
  --hairline: rgba(30, 30, 32, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: #fff; }

a { color: inherit; }

img { display: block; max-width: 100%; }

/* ---------- type roles ---------- */

.u {
  font-family: "Jost", Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  font-size: 12px;
  color: var(--blue);
}

h1, h2, h3 {
  font-family: "Jost", Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
}

/* ---------- nav ---------- */

nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  z-index: 10;
}

nav .mark { display: flex; align-items: center; text-decoration: none; }

nav .mark img { height: 30px; width: auto; }

nav .links { display: flex; gap: 32px; }

nav .links a {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.25s;
}

nav .links a:hover, nav .links a:focus-visible { color: var(--blue); }
nav .links a.here { color: var(--ink); }


/* ---------- hero ---------- */

header.hero {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 130px 24px 64px;
}

/* pale light falling from above */
header.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  height: 110%;
  background: radial-gradient(
    ellipse 50% 62% at 50% 0%,
    rgba(31, 169, 226, 0.10) 0%,
    rgba(31, 169, 226, 0.04) 45%,
    transparent 72%
  );
  pointer-events: none;
}

header.hero .logo {
  width: min(640px, 86vw);
  position: relative;
}

header.hero .tagline {
  font-style: italic;
  color: var(--dim);
  font-size: 18px;
  margin-top: 28px;
  position: relative;
}

.fade-in { animation: fade 1.4s ease both; }
.fade-in.late { animation-delay: 0.35s; }

@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in.late { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- sections ---------- */

main { max-width: 1020px; margin: 0 auto; padding: 0 24px; }

section { padding: 88px 0; border-top: 1px solid var(--hairline); }

section > .u { display: block; margin-bottom: 44px; }

/* feature (in development) */

.feature h2 {
  font-size: clamp(28px, 4.5vw, 46px);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.feature .meta {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  margin-bottom: 26px;
}

.feature p { max-width: 580px; }

.feature-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: center;
}

.feature-grid figure {
  border: 1px solid var(--hairline);
}

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid figure { max-width: 300px; }
}

/* films grid */

.films {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.film figure {
  aspect-ratio: 2 / 3;
  background: var(--wash);
  border: 1px solid var(--hairline);
  overflow: hidden;
  margin-bottom: 22px;
}

.film figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.film:hover figure img { transform: scale(1.02); }

.film h3 {
  font-size: 20px;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.film .meta {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dim);
  margin-bottom: 14px;
}

.film p { font-size: 16px; }
.film p.laurels { color: var(--blue); font-size: 15px; margin-top: 12px; }

/* reel */

.reel .frame {
  position: relative;
  padding-top: 56.25%;
  background: var(--ink);
}

.reel iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- about page ---------- */

.page { padding-top: 170px; padding-bottom: 20px; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 72px;
  align-items: start;
}

.portrait {
  position: sticky;
  top: 110px;
  border: 1px solid var(--hairline);
}

.about-body .meta {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  margin: -26px 0 30px;
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .portrait { position: static; max-width: 380px; }
}

/* team (about page) */
.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-top: 56px;
}

.member figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin-bottom: 26px;
}

.member figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.member .u { display: block; margin-bottom: 12px; }

.member h2 {
  font-size: 24px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.member .meta {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dim);
  margin-bottom: 18px;
}

.member p { font-size: 16.5px; }

@media (max-width: 820px) {
  .team { grid-template-columns: 1fr; gap: 60px; }
  .member figure { max-width: 400px; }
}

.page .lede {
  max-width: 640px;
  font-size: 19px;
}
.page .lede em { color: var(--dim); }

.page h1 {
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 0.16em;
  margin-bottom: 34px;
}

.prose { max-width: 620px; }
.prose p { margin-bottom: 22px; }
.prose p em { color: var(--dim); }

/* contact */

.contact form { max-width: 520px; margin-top: 36px; }

.contact label {
  display: block;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dim);
  margin: 26px 0 8px;
}

.contact input, .contact textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  padding: 8px 0 10px;
  transition: border-color 0.25s;
}

.contact input:focus, .contact textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}

.contact textarea { min-height: 120px; resize: vertical; }

.contact button {
  margin-top: 36px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 500;
  padding: 14px 34px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.contact button:hover, .contact button:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}

.contact .direct { margin-top: 44px; color: var(--dim); }

.contact .direct a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
}

.contact .direct a:hover { color: var(--blue); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hairline);
  margin-top: 100px;
  padding: 44px 40px 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

footer .u { letter-spacing: 0.24em; color: var(--dim); }

footer .links { display: flex; gap: 28px; }

footer .links a {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dim);
  text-decoration: none;
}

footer .links a:hover { color: var(--blue); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  nav { padding: 22px 20px; }
  nav .links { gap: 20px; }
  .films { grid-template-columns: 1fr; gap: 64px; }
  section { padding: 64px 0; }
  footer { padding: 36px 20px 44px; }
}

/* keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}