:root {
  --accent: #8c3838;
  --accent-soft: #bf7373;
}

.hero-actions .button.is-accent,
.contact-actions .button.is-accent {
  border-color: transparent !important;
  background: var(--accent) !important;
}

.hero-actions .button:not(.is-accent),
.contact-actions .button:not(.is-accent) {
  border-color: rgba(242, 242, 242, 0.16);
  background: rgba(255, 255, 255, 0.04) !important;
}

.button-primary:hover {
  background: #9c4242;
}

body {
  background:
    radial-gradient(circle at top left, rgba(140, 56, 56, 0.08), transparent 28rem),
    var(--bg);
}

.main-nav a:hover {
  background: rgba(191, 115, 115, 0.11);
}

.blog-section {
  background:
    linear-gradient(180deg, rgba(191, 115, 115, 0.045), rgba(15, 15, 15, 0) 42%),
    var(--bg);
}

.video-shell {
  background:
    linear-gradient(135deg, rgba(140, 56, 56, 0.22), rgba(255, 255, 255, 0.04)),
    #101010;
}

.thumbnail-button.is-fallback::before {
  background:
    linear-gradient(135deg, rgba(140, 56, 56, 0.28), transparent 58%),
    #111;
}

.project-link {
  color: var(--accent-soft);
  border-bottom-color: rgba(191, 115, 115, 0.5);
}

.project-meta {
  align-items: start;
}

.project-text {
  min-width: 0;
}

.project-description {
  max-width: 940px;
  margin: 14px 0 0;
  color: rgba(211, 211, 211, 0.86);
  font-size: 0.96rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.section-heading .eyebrow,
.contacts .eyebrow {
  color: var(--accent-soft);
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover {
    border-color: rgba(191, 115, 115, 0.28);
  }

  .thumbnail-button:hover .play-mark {
    background: rgba(140, 56, 56, 0.76);
  }
}

.hero-collage {
  position: absolute;
  right: var(--page-pad);
  top: 50%;
  z-index: 6;
  width: min(45vw, 780px);
  aspect-ratio: 1700 / 1081;
  max-width: 54%;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(6%, -43%, 0);
  filter: drop-shadow(0 44px 110px rgba(0, 0, 0, 0.22));
}

.hero-collage-tile {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: auto;
  transform: translateZ(0);
  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.hero-collage-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform 260ms ease;
}

.hero-collage-tile--1 {
  left: 3.12%;
  top: 10.08%;
  width: 15.65%;
  height: 32.84%;
}

.hero-collage-tile--2 {
  left: 20.06%;
  top: 2.41%;
  width: 20.24%;
  height: 40.43%;
}

.hero-collage-tile--3 {
  left: 41.71%;
  top: 5.74%;
  width: 21.24%;
  height: 49.58%;
}

.hero-collage-tile--4 {
  left: 64.35%;
  top: 0;
  width: 35.65%;
  height: 90.1%;
}

.hero-collage-tile--5 {
  left: 0;
  top: 44.96%;
  width: 16.12%;
  height: 35.25%;
}

.hero-collage-tile--6 {
  left: 17.53%;
  top: 44.96%;
  width: 21.65%;
  height: 49.21%;
}

.hero-collage-tile--7 {
  left: 40.65%;
  top: 57.26%;
  width: 22.29%;
  height: 42.74%;
}

@media (hover: hover) and (pointer: fine) {
  .hero-collage-tile:hover {
    z-index: 8;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
    transform: translate3d(0, -5px, 0);
  }

  .hero-collage-tile:hover img {
    transform: scale(1.075);
  }
}

.hero-inner {
  position: relative;
  z-index: 5;
}

.hero-inner > * {
  max-width: 720px;
}

.hero h1 {
  max-width: 720px;
}

.hero h1 .hero-name {
  color: var(--heading);
  white-space: nowrap;
}

.hero-role {
  margin-top: 28px;
  font-size: 0.72em;
}

.title-line {
  white-space: nowrap;
}

.hero-copy {
  max-width: 660px;
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .hero-inner > *,
  .hero h1 {
    max-width: 520px;
  }

  .hero-collage {
    right: var(--page-pad);
    width: min(45vw, 560px);
    max-width: 48%;
  }
}

@media (max-width: 820px) {
  .hero-inner > *,
  .hero h1 {
    max-width: 100%;
  }

  .hero h1 .hero-name {
    font-size: clamp(2.1rem, 9vw, 2.46rem);
    white-space: nowrap;
  }

  .hero-name {
    font-size: clamp(2.1rem, 9vw, 2.46rem);
  }

  .hero-role,
  .hero-copy {
    margin-top: 22px;
  }

  .hero-collage {
    position: relative;
    right: auto;
    top: auto;
    width: min(100%, 520px);
    max-width: none;
    margin: 26px auto 0;
    opacity: 1;
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }

  .hero-inner {
    z-index: 5;
  }

  .hero-actions {
    position: relative;
    z-index: 2;
    margin-top: 28px;
  }
}

@media (max-width: 430px) {
  .hero h1 .hero-name {
    font-size: clamp(2rem, 8.7vw, 2.28rem);
  }
}