:root {
  --ink: #1d1712;
  --ink2: #4a3f36;
  --ink3: #8a7a66;
  --bone: #ece0c8;
  --bone2: #e2d4b6;
  --bone3: #f4ecd9;
  --clay: #cd9b82;
  --terra: #ab4d31;
  --terra-d: #873a22;
  --display: "Ultra", serif;
  --slab: "Zilla Slab", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--ink);
  background-image: var(--grain);
  background-blend-mode: soft-light;
  color: var(--bone);
  font-family: var(--slab);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--clay); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

.masthead { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 3px double rgb(236 224 200 / 45%); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand img { height: 50px; }
.brand span { padding-left: .42em; color: var(--bone); font-family: var(--display); font-size: 12px; letter-spacing: .42em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 24px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.reel-link { border: 1.5px solid var(--clay); padding: 8px 15px; letter-spacing: .14em; }

.hero { position: relative; height: 520px; margin-top: 24px; border: 2px solid #000; background: center 38% / cover no-repeat; }
.hero::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgb(29 23 18 / 92%) 0%, rgb(29 23 18 / 60%) 44%, rgb(29 23 18 / 18%) 100%); }
.hero-content { position: absolute; top: 50%; left: 46px; max-width: 560px; transform: translateY(-50%); }
.stamp { display: inline-block; margin: 0; padding: 6px 12px; border: 1.5px solid var(--clay); color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; transform: rotate(-2.5deg); }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; }
h1 { margin-top: 20px; font-size: 64px; letter-spacing: -.01em; line-height: .9; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.hero-actions p { margin: 0; color: var(--bone2); font-size: 11px; font-weight: 600; }
.button { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; background: var(--terra); color: var(--bone); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.button:hover { background: var(--terra-d); color: var(--bone); }
.triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }

.programme { padding: 56px 0 12px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 3px double rgb(236 224 200 / 50%); border-bottom: 1px solid rgb(236 224 200 / 18%); }
.section-heading h2 { font-size: 26px; }
.section-heading p, .eyebrow { margin: 0; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.project-row { display: grid; grid-template-columns: 52px 156px 1fr; gap: 26px; align-items: center; min-height: 132px; padding: 22px 0; border-bottom: 1px solid rgb(236 224 200 / 14%); }
a.project-row:hover { color: var(--bone); }
.project-number { color: var(--clay); font-family: var(--display); font-size: 38px; text-align: center; }
.still { position: relative; aspect-ratio: 16 / 9; border: 1.5px solid rgb(236 224 200 / 32%); background-color: var(--ink2); background-image: var(--grain); background-size: cover; }
.still.has-image { background-image: var(--project-image), var(--grain); background-position: var(--project-position, center), center; background-size: cover, auto; }
.play-glyph { position: absolute; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--bone); border-radius: 50%; background: rgb(29 23 18 / 55%); transform: translate(-50%, -50%); }
.project-info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.project-title { font-size: 21px; font-weight: 700; }
.project-format { flex: none; color: var(--ink3); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.leader { flex: 1; min-width: 12px; border-bottom: 1px dotted rgb(236 224 200 / 35%); transform: translateY(-5px); }
.project-year { flex: none; color: var(--clay); font-family: var(--display); font-size: 26px; }
.watch-label { flex: none; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.contact { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; margin-top: 24px; padding: 46px 0 52px; border-top: 3px double rgb(236 224 200 / 45%); }
.contact h2 { margin-top: 12px; font-size: 40px; line-height: .92; }
.email-link { margin-top: 20px; letter-spacing: .14em; }
.contact-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; color: var(--bone2); font-size: 12px; font-weight: 600; line-height: 1.7; text-align: right; }
.contact-right img { height: 78px; }
.contact-right p { margin: 0; }
.company-name { color: var(--ink3); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .hero { height: auto; min-height: 500px; background-position: center 38%; }
  .hero-content { top: auto; right: 26px; bottom: 34px; left: 26px; max-width: none; transform: none; }
  h1 { font-size: 44px; }
  .project-row { grid-template-columns: 42px 1fr; grid-template-areas: "number info" "still still"; gap: 12px 16px; }
  .project-number { grid-area: number; }
  .still { grid-area: still; width: min(100%, 420px); }
  .project-info { grid-area: info; flex-wrap: wrap; }
  .leader { display: none; }
  .contact { grid-template-columns: 1fr; }
  .contact-right { align-items: flex-start; text-align: left; }
}

@media (max-width: 440px) {
  .wrap { padding: 0 16px; }
  nav { gap: 14px; font-size: 10px; }
  .reel-link { padding: 8px 9px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  h1 { font-size: 36px; }
  .section-heading h2 { font-size: 22px; }
  .project-title { font-size: 19px; }
  .contact h2 { font-size: 34px; }
  .email-link { font-size: 10px; }
}