/* TK material studies: decorative artwork, with native SVG identity retained.
   Original artwork is preserved in assets/images/*_backup.svg.
   To restore the previous treatment, remove this stylesheet from _quarto.yml.
   Original URLs: hero-systems-field_backup.svg,
   systems-architecture-study_backup.svg, model-trace-lines_backup.svg. */

.hero__art {
  background-image: url("../images/personal_branding/website-artwork/tk-systems-field.webp");
  background-position: 64% center;
  opacity: 1;
}

.hero::after {
  background:
    radial-gradient(ellipse at 46% 46%, rgb(6 25 35 / 76%) 0%, rgb(6 25 35 / 64%) 42%, rgb(6 25 35 / 18%) 100%),
    linear-gradient(0deg, rgb(6 25 35 / 62%), transparent 30%, transparent 82%, rgb(6 25 35 / 22%));
}

.approach-band {
  background:
    linear-gradient(100deg, rgb(6 25 35 / 97%) 8%, rgb(6 25 35 / 91%) 48%, rgb(6 25 35 / 76%) 100%),
    url("../images/personal_branding/website-artwork/tk-architecture.webp") center / cover;
}

.project--architecture {
  background-image:
    linear-gradient(90deg, #0a283b 0%, rgb(10 40 59 / 97%) 35%, rgb(10 40 59 / 86%) 66%, rgb(10 40 59 / 52%) 100%),
    url("../images/personal_branding/website-artwork/tk-architecture.webp");
  background-position: center, right center;
  background-size: cover;
}

.project--traceability {
  background-image:
    linear-gradient(90deg, #0a283b 0%, rgb(10 40 59 / 97%) 35%, rgb(10 40 59 / 86%) 66%, rgb(10 40 59 / 52%) 100%),
    url("../images/personal_branding/website-artwork/tk-traceability.webp");
  background-position: center, right center;
  background-size: cover;
}

.writing-intro {
  background:
    linear-gradient(90deg, rgb(11 43 61 / 98%) 15%, rgb(11 43 61 / 94%) 52%, rgb(11 43 61 / 80%) 100%),
    url("../images/personal_branding/website-artwork/tk-traceability.webp") center right / cover;
}

.closing {
  background:
    linear-gradient(180deg, rgb(6 25 35 / 98%), rgb(6 25 35 / 88%) 45%, rgb(6 25 35 / 97%)),
    url("../images/personal_branding/website-artwork/tk-systems-field.webp") center / cover;
}

.writing-page {
  background:
    linear-gradient(90deg, rgb(6 25 35 / 100%) 15%, rgb(6 25 35 / 96%) 50%, rgb(6 25 35 / 80%) 100%),
    url("../images/personal_branding/website-artwork/tk-traceability.webp") right top / auto min(50rem, 100%) no-repeat;
}

@media (max-width: 48rem) {
  .hero__art {
    background-image: url("../images/personal_branding/website-artwork/tk-systems-field-mobile.webp");
    background-position: 68% center;
  }
  .hero::after {
    background: linear-gradient(180deg, rgb(6 25 35 / 55%), rgb(6 25 35 / 78%) 40%, rgb(6 25 35 / 88%));
  }
  .approach-band {
    background-image: linear-gradient(100deg, rgb(6 25 35 / 97%), rgb(6 25 35 / 87%)), url("../images/personal_branding/website-artwork/tk-architecture-mobile.webp");
  }
  .project--architecture {
    background-image: linear-gradient(90deg, rgb(10 40 59 / 98%), rgb(10 40 59 / 85%) 60%, rgb(10 40 59 / 65%)), url("../images/personal_branding/website-artwork/tk-architecture-mobile.webp");
  }
  .project--traceability {
    background-image: linear-gradient(90deg, rgb(10 40 59 / 98%), rgb(10 40 59 / 85%) 60%, rgb(10 40 59 / 65%)), url("../images/personal_branding/website-artwork/tk-traceability-mobile.webp");
  }
  .writing-intro, .writing-page {
    background-image: linear-gradient(90deg, rgb(6 25 35 / 98%), rgb(6 25 35 / 90%)), url("../images/personal_branding/website-artwork/tk-traceability-mobile.webp");
  }
  .closing {
    background-image: linear-gradient(180deg, rgb(6 25 35 / 97%), rgb(6 25 35 / 90%), rgb(6 25 35 / 98%)), url("../images/personal_branding/website-artwork/tk-systems-field-mobile.webp");
  }
}

@media (forced-colors: active) {
  .hero__art, .hero::after { display: none; }
  .approach-band, .project--architecture, .project--traceability,
  .writing-intro, .writing-page, .closing { background: Canvas; }
}

@media print {
  .hero__art, .hero::after { display: none; }
  .approach-band, .project--architecture, .project--traceability,
  .writing-intro, .writing-page, .closing { background: white; }
}