/* ----- */
/* Reset */
/* ----- */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Make images easier to work with */

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

/* Inherit fonts for inputs and buttons */

input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Remove default margin */
* {
  margin: 0;
}

/* Set default text-wrap of 'pretty' */
* {
  text-wrap: pretty
}

/* ---- */
/* Base */
/* ---- */

@media (min-width: 768px) {
  :root {
    --outer-margin: var(--outer-margin-desktop);
  }
}

html {
  color: var(--text-color);
  font-family: var(--font-family-base);
  font-optical-sizing: auto;
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  image-rendering: -webkit-optimize-contrast;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  scroll-padding-top: 48px;
  text-underline-offset: var(--text-underline-offset);
}

* {
  color: var(--text-color);
  
  font-smooth: always;
}

body {
  background-color: var(--purple-10);
}

/* Links */

a {
  color: var(--link-color);
  text-decoration-thickness: var(--hairline);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover-color);
}

*:focus-visible,
*:target {
  outline: var(--focus-outline);
  position: relative;
}

a.prominent-link {
  font-weight: bold;
  text-decoration-thickness: var(--hairline);
}

a.prominent-link .icon {
  aspect-ratio: 1 / 1;
  background-color: var(--yellow-40);
  border-radius: 50%;
  color: var(--black);
  display: inline-block;
  margin-inline-start: 0.4em;
  width: 1em;
  vertical-align: text-bottom;
}

/* ------ */
/* Layout */
/* ------ */

/* Stop Flexbox Grid alignment from affecting text-alignment */
*[class*="start-"],
*[class*="center-"],
*[class*="end-"] {
  text-align: inherit;
}

.wrapper {
  margin-inline: auto;
  max-width: var(--grid-max-width);
}

.container-fluid {
  padding-inline: var(--outer-margin);
}

.row {
  flex-basis: 100%;
  margin-inline: calc(-1 * var(--gutter-width)/2);
  row-gap: var(--gutter-width);
}

.row + .row {
  margin-block-start: var(--spacing-layout-1);
}

*[class*="col-"] {
  padding-inline: calc(var(--gutter-width)/2);
}

.stack > * + * {
  margin-block-start: var(--spacing-layout-2);
} 

/* ---------- */
/* Typography */
/* ---------- */

.display-1, .display-2, h1, h2, .h1, .h2 {
  text-wrap: balance;
}

.regular {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.display-1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display-1);
  font-weight: var(--font-weight-display-1);
  line-height: var(--line-height-display-1);
  letter-spacing: var(--letter-spacing-display-1);
  text-wrap: balance;
}

.display-2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display-2);
  font-weight: var(--font-weight-display-2);
  line-height: var(--line-height-display-2);
  letter-spacing: var(--letter-spacing-display-2);
  text-wrap: balance;
}

h1, 
.h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2, 
.h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3, 
.h3 {
  color: var(--purple-60);
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4, 
.h4 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

.extra-large {
  font-size: var(--font-size-extra-large);
  line-height: var(--line-height-extra-large);
  letter-spacing: var(--letter-spacing-extra-large);
  text-wrap: pretty;
}

.large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-large);
  text-wrap: pretty;
}

.small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

strong,
.strong {
  font-weight: var(--font-weight-bold);
}

.normal {
  font-weight: normal;
}

.eyebrow {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: var(--line-height-eyebrow);
  text-transform: uppercase;
}

.eyebrow-with-lines {
  --text-color: var(--purple-60);
  --line-color: var(--purple-80);

  align-items: center;
  color: var(--text-color);
  column-gap: var(--spacing-component-4);
  display: flex;
  font-family: var(--font-family-eyebrow);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: var(--line-height-eyebrow);
  position: relative;
  text-align: center;
  text-transform: uppercase;
  text-wrap: wrap;
}

.eyebrow-with-lines::before {
  border-block-end: var(--hairline) solid var(--line-color);
  content: "";
  flex-grow: 1;
  min-width: var(--spacing-layout-1);
}

.eyebrow-with-lines::after {
  border-block-end: var(--hairline) solid  var(--line-color);
  content: "";
  flex-grow: 1;
  min-width: var(--spacing-layout-1);
}

.sans-serif {
  font-family: var(--font-family-sans-serif);
}

.serif {
  font-family: var(--font-family-serif);
}

/* Highlight */

.highlight {
  --highlight-color: var(--green-40);
  --thickness: 1.6em;
  
  background-image: linear-gradient(var(--highlight-color), var(--highlight-color));
  background-size: 100% var(--thickness);
  background-position: bottom -0.3em left;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  font-weight: 500;
  padding-inline: 0.25em;
}

@keyframes hightlight {
  0% {
    background-size: 0% var(--thickness);
  }
  100% {
    background-size: 100% var(--thickness);
  }
}

@media (prefers-reduced-motion: no-preference) {  
  .highlight.is-visible {
    animation: hightlight ease 2s;
  }

  @media (min-width: 768px) {
    .highlight.is-visible {
      --desktop-delay: 0s;

      transition-delay: var(--desktop-delay);
    }
  }
}

/* Lists */

ul {
  padding-inline-start: 1em;
}

ul li::marker {
  color: var(--purple-60);
  width: 1em;
}

ul > li + li {
  margin-block-start: 0.2em;
}

ul.ul--inline {
  padding: 0;
}

ul.ul--inline > li {
  display: inline;
  padding-inline-end: 0.25em;
}

ul.ul--inline > li:not(:first-child)::before {
  color: var(--purple-60);
  content: " •\00a0";
  padding-inline-end: 0.25em;
}

/* Text spacing */

h1 + *,
.h1 + *,
h2 + * ,
.h2 + *,
h3 + *,
.h3 + *,
.eyebrow + *,
p + *,
.display-1 + *,
.display-2 + * {
  margin-block-start: var(--spacing-layout-half);
}

* + p {
  margin-block-start: var(--spacing-layout-half);
}

.eyebrow + h1,
.eyebrow + .h1,
.eyebrow + h2,
.eyebrow + .h2,
.eyebrow + .display-1,
.eyebrow + .display-2 {
  margin-block-start: var(--spacing-layout-half);
}

/* Text alignment */

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

/* --------- */
/* Utilities */
/* --------- */

/* Screen reader only text */

.sr-only {
  clip-path: inset(50%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Antialiase */

.antialiase {
  font-smooth: always;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Textured background */
.texture {
  background: var(--background);
  position: relative;
  z-index: 2;
}

.texture::before {
  background-image: url("../images/texture.png");
  content: "";
  display: block;
  height: 100%;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* Sticky */

.row {
  position: relative;
}

.sticky {
  position: sticky;
  top: var(--spacing-layout-2);
}

/* Grid stretch option */

.row[class*=stretch-] {
  display: flex;
  align-items: stretch;
}

.row[class*=stretch-] > *[class*="col-"] {
  display: flex;
  align-items: stretch;
}

/* ---------------- */
/* Material symbols */
/* ---------------- */

.material-symbols-outlined {
  color: inherit;
  font-size: inherit;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
}

/* ------ */
/* Spacer */
/* ------ */

.spacer {
  --height: 2;
  
  display: block;
  height: calc(var(--spacing-layout-1) * var(--height));
  margin-block-start: 0;
}

.spacer + * {
  margin-block-start: 0;
}

/* ----- */
/* Label */
/* ----- */

.label {
  --bg-color: var(--blue-20);
  --text-color: var(--purple-60);

  background-color: var(--bg-color);
  border-radius: 0.5em;
  color: var(--text-color);
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: bold;
  line-height: var(--line-height-small);
  padding: 0.1em 0.6em;
  transform: translateY(-0.1em);
}

/* ------ */
/* Header */
/* ------ */

.header {
  --bg-color: var(--purple-80);
  --link-color: var(--white);
  --link-hover-color: var(--white);
  
  background-color: var(--bg-color);
  padding-block: var(--spacing-layout-1);
}

.header__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-layout-1);
}

@media (min-width: 768px) {
  .header__content {
    align-items: center;
    flex-direction: row;
  }
}

.header__content .eyebrow {
  background-color: var(--white);
  border-block-end: var(--medium) solid var(--green-60);
  color: var(--black);
  display: block;
  padding-inline: var(--spacing-component-2)
}

/* ----------- */
/* Page header */
/* ----------- */

.page-header {
  --background: var(--purple-20);

  background: var(--background);
  background-image: url("../images/bg-cover.svg");
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-block: var(--spacing-layout-3) var(--spacing-layout-7);
  position: relative;
}

.page-header .eyebrow {
  background-color: var(--white);
  color: var(--purple-60);
  display: inline-block;
  font-size: var(--font-size-small);
  line-height: 1;
  margin-inline: auto;
  padding: var(--spacing-component-2);
}

.title {
  font-size: clamp(var(--font-size-display-1), 6vw, 80px);
  text-align: center;
}

@media (min-width: 768px) {
  .title {
    text-align: start;
  }
}

.title span {
  --highlight-color: var(--white);
  --highlight-thickness: 0.25em;

  background-image: linear-gradient(
    var(--highlight-color),
    var(--highlight-color)
  );

  background-size: 100% var(--highlight-thickness);
  background-position: bottom 0.2em left;
  background-repeat: no-repeat;
}

/* Title animation */

@keyframes titleFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes titleUnderline {
  0% {
    background-size: 0% var(--highlight-thickness);
  }
  50% {
    background-size: 0% var(--highlight-thickness);
  }
  100% {
    background-size: 100% var(--highlight-thickness);
  }
}


@media (prefers-reduced-motion: no-preference) {
  .title span {
    animation: titleFadeIn ease 3s, titleUnderline ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  .title span:nth-of-type(1){ animation-delay: 0.5s }
  .title span:nth-of-type(2){ animation-delay: 1.5s }
  .title span:nth-of-type(3){ animation-delay: 2.5s }
}

/* Logo */

.logo svg {
  height: calc(1.5 * var(--spacing-layout-1));
}

/* ------- */
/* Section */
/* ------- */

section {
  --padding: var(--spacing-layout-3);

  background: var(--background);
  outline-offset: calc(-1 * var(--medium));
  padding-block: var(--padding);
}

section + section {
  border-block-start: var(--thick) solid var(--white);
}

section > * + * {
  margin-block-start: var(--spacing-layout-2);
}

section#message-from-our-ceo {
  background: linear-gradient(0deg, var(--purple-80), var(--purple-60));
}

/* ---------- */
/* Subsection */
/* ---------- */

.subsection {
  padding-block: var(--spacing-layout-1);
}

/* ----------------- */
/* Table of contents */
/* ----------------- */

.table-of-contents > .row {
  row-gap: 0;
}

.table-of-contents__column {
  background-color: var(--white);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  padding-inline: calc(-1 * var(--gutter-width));
}

@media (min-width: 768px){
  .table-of-contents {
    display: flex;
    column-gap: var(--gutter-width);
  }

  .table-of-contents__column {
    border-block-start: var(--thick) solid var(--purple-60);
    flex: 1 0 0;
  }

  .table-of-contents__column:focus-within {
    outline: var(--focus-outline);
  }
}

.table-of-contents ul {
  list-style-type: none;
  padding: 0;
}

.table-of-contents li + li,
.table-of-contents ul ul {
  border-block-start: var(--hairline) solid var(--purple-20);
  margin-block-start: 0;
}

.table-of-contents a {
  --link-hover-color: var(--purple-80);

  background-color: var(--white);
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-component-3);
  padding: var(--spacing-component-3) var(--spacing-component-4);
  text-decoration: none;
}

.table-of-contents a:hover,
.table-of-contents a:focus-within {
  background-color: var(--blue-20);
  outline: none;
}

.table-of-contents a::before {
  color: var(--purple-60);
  font-size: 1.2em;
  content: "●";
  text-align: center;
  width: var(--spacing-component-3);
}

.table-of-contents ul ul {
  font-weight: normal;
}

.table-of-contents ul ul a::before {
  color: var(--purple-60);
  font-size: 1.2em;
  content: "–";
  text-align: center;
  width: var(--spacing-component-3);
}

.table-of-contents > .table-of-contents__column > li {
  font-weight: bold;
}


/* Remove gap between columns on mobile */

@media (max-width: 768px){
  .table-of-contents.container-fluid {
    gap: 0;
  }

  .table-of-contents__column:first-of-type {
    border-block-start: var(--thick) solid var(--purple-60);
  }

  .table-of-contents__column:last-of-type {
    border-block-start: var(--hairline) solid var(--purple-20);
  }
}

/* ------ */
/* Navbar */
/* ------ */

.navbar {
  background-color: var(--white);
  box-shadow: var(--shadow-medium);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}

.navbar ul {
  -ms-overflow-style: none;
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  height: 0;
  list-style: none;
  margin: 0 auto;
  max-width: var(--grid-max-width);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  text-align: center;
  transition: height 0.5s;
  white-space: nowrap;
}

.navbar ul li + li {
  margin: 0;
}

.navbar ul .container::-webkit-scrollbar { 
  display: none;
}

.navbar ul::before,
.navbar ul::after {
  content: "";
  display: inline-block;
  min-width: var(--outer-margin);
}

.navbar.is-visible ul {
  height: 48px;
}

.navbar a {
  align-items: center;
  color: var(--purple-60);
  display: flex;
  font-size: var(--font-size-small);
  font-weight: bold;
  height: 100%;
  padding: var(--spacing-component-2) var(--spacing-component-3);
  text-decoration: none;
  transition: box-shadow 0.5s ease-in-out;
  white-space: nowrap;
}

.navbar a:hover {
  color: var(--purple-60);
  background-color: var(--blue-20);
}

.is-active a {
  box-shadow: inset 0 calc(-1 * var(--medium)) 0 var(--purple-60);
}

/* ------ */
/* Letter */
/* ------ */

.letter {
  background-color: var(--white);
  border-block-start: var(--thick) solid var(--purple-60);
  box-shadow: var(--shadow-medium);
  margin-block-start: calc(-1 * var(--spacing-layout-6));
  padding: var(--spacing-layout-1) var(--outer-margin);
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .letter {
    margin-inline: auto;
    padding: var(--spacing-layout-3) var(--spacing-layout-2);
  }
}

/* --- */
/* Map */
/* --- */

.map {
  background-color: var(--white-40);
  border: var(--thick) solid var(--white);
  height: auto;
  transform: scale(0.9);
  width: 100%;
}

.map #all-states {
  transform: scale(1.2) translate(-5%, -5%);
}

.map .state {
  fill: var(--white);
  stroke: var(--gray-60);
  stroke-width: 0.5;
  stroke-linejoin:round;
}

.map .state.is-partner,
.map .is-partner .state {
  fill: var(--green-60);
  stroke: var(--black);
  stroke-width: 2;
}

.map .state.is-software,
.map .is-software .state {
  fill: var(--blue-40);
  stroke: var(--black);
  stroke-width: 2;
}

.map .state.is-both,
.map .is-both .state {
  fill: var(--green-80);
  stroke: var(--black);
  stroke-width: 2;
}

/* --- */
/* Key */
/* --- */

.key {
  display: inline-block;
  margin-inline: auto;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin-block-start: var(--spacing-layout-half);
  margin-block-end: -0.5em;
}

.key__item {
  display: flex;
  flex-direction: row;
  margin-block: 0.5em;
  margin-inline-end: 2em;
  text-align: start;
}

.key__item::before {
  background: var(--color);
  border: var(--thin) solid var(--black);
  border-radius: 50%;
  content: "";
  width: 1.5em;
  height: 1.5em;
  margin-inline-end: 0.5em;
}

.key__item--partnership::before { --color: var(--green-60); }
.key__item--software::before { --color: var(--blue-40); }
.key__item--both::before { --color: var(--green-80); }

/* --- */
/* Box */
/* --- */

.box {
  --text-color: var(--black);
  --link-color: var(--purple-60);
  --link-hover-color: var(--red-60);

  background-color: var(--white);
  border: var(--thick) solid var(--white);
  box-shadow: var(--shadow-medium);
  padding: var(--spacing-component-2);
  position: relative;
}

/* --------- */
/* Spotlight */
/* --------- */

.spotlight {
  --text-color: var(--black);
  --link-color: var(--purple-60);
  --link-hover-color: var(--red-60);
  --shadow-color-1: var(--green-40);
  --shadow-color-2: var(--green-60);

  position: relative;
  display: block;
  padding: 0;
}

.spotlight__inner {
  background-color: var(--white);
  box-shadow: var(--shadow-medium);
  padding: var(--spacing-component-4);
  z-index: 3;
}

.spotlight::before {
  background: 
    linear-gradient(45deg, var(--shadow-color-1), var(--shadow-color-2)),
    url("../images/noise.svg");
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  display: block;
  position: absolute;
  top: 0;
  transform: translate(var(--thick), var(--thick));
  z-index: -1;
}

/* ---- */
/* Stat */
/* ---- */

.stat {
  --highlight-color: var(--white-40);

  display: block;
  text-align: center;
  text-wrap: balance;
}

.stat strong {
  box-decoration-break: clone;
  margin-inline: auto;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  background-image: linear-gradient(45deg, var(--green-40), var(--purple-40));
  background-size: 100% 0.5em;
  background-position: bottom 0.2em left;
  background-repeat: no-repeat;
  padding-inline: 0.25em;
}

/* ---------- */
/* Big number */
/* ---------- */

.big-number {
  display: inline;
  box-decoration-break: clone;
  font-size: var(--font-size-display-2);
  font-weight: bold;
  background-image: linear-gradient(45deg, var(--green-40), var(--purple-40));
  background-size: 100% 0.25em;
  background-position: bottom 0em left;
  background-repeat: no-repeat;
  line-height: 1.4em;
}

@media (prefers-reduced-motion: no-preference) {  
  .big-number.is-visible {
    animation: underline ease 2s;
  }

  @media (min-width: 768px) {
    .big-number.is-visible {
      --desktop-delay: 0s;

      transition-delay: var(--desktop-delay);
    }
  }
}

/* ---- */
/* Card */
/* ---- */

.card,
a.card {
  --bg-color: var(--white);
  
  background-color: var(--bg-color);
  box-shadow: var(--shadow-small);
  display: grid;
  gap: var(--spacing-layout-half);
  grid-template-areas: "label icon" "title title" "description description";
  grid-template-columns: 1fr auto;
  padding: var(--spacing-component-4);
  text-decoration: none;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

.card:hover,
a.card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(calc(-1 * var(--spacing-layout-half)));
}

.card__title {
  font-size: var(--font-size-h3);
  font-weight: bold;
  grid-area: title;
  text-wrap: balance;
}

.card__description {
  font-size: var(--font-size-small);
  grid-area: description;
}

.card__label {
  color: var(--purple-60);
  font-size: var(--font-size-small);
  font-weight: bold;
  grid-area: label;
}

.card__icon {  
  grid-area: icon;
}

.card__icon > span {
  background-color: var(--green-40);
  border-radius: 1000px;
  display: inline-block;
  padding: var(--spacing-component-2);
}

/* ----------- */
/* Impact card */
/* ----------- */

.impact-card {
  --spacing: var(--spacing-layout-half);

  background-color: var(--white);
  border-block-start: var(--thick) solid var(--purple-60);
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-layout-half);
  padding: var(--spacing-component-4);
}

.impact-card__header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--spacing-layout-half);
}

@media (min-width: 768px) {
  .impact-card__header {
    flex-direction: row;
  }
}

.impact-card__title {
  color: var(--purple-60);
  font-size: var(--font-size-small);
  font-weight: bold;
}

/* ------ */
/* Avatar */
/* ------ */

.avatar img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-inline: auto;
  width: var(--spacing-layout-8);
}

/* ----- */
/* Photo */
/* ----- */

.photo {
  border: var(--thick) solid var(--white);
  box-shadow: var(--shadow-medium);
  object-fit: cover;
}

/* ----- */
/* Chart */
/* ----- */

.chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart__inner {
  display: inline-flex;
  flex-direction: column;
  align-items: end;
}

@media (max-width: 768px) {
  .chart__inner {
    width: 60vw;
  }
}

.chart__bar {
  align-items: center;
  column-gap: 0.5em;
  display: inline-flex;
  height: max(var(--line-height-base), calc(4px * var(--size)));
  justify-content: end;
  text-align: right;
  transition: opacity 0.2s ease-in-out;
}

.chart:has(> :hover) .chart__bar:not(:hover) {
  opacity: 0.2;
}

.chart__bar strong {
  font-variant-numeric: tabular-nums;
}

.chart__bar::after {
  background-color: var(--bar-color);
  content: "";
  height: 100%;
  flex: 0;
  padding: var(--spacing-component-2);
}

.chart__bar:nth-child(1) { --bar-color: var(--purple-60); }
.chart__bar:nth-child(2) { --bar-color: var(--green-60); }
.chart__bar:nth-child(3) { --bar-color: var(--green-80); }
.chart__bar:nth-child(4) { --bar-color: var(--yellow-60); }
.chart__bar:nth-child(5) { --bar-color: var(--blue-60); }
.chart__bar:nth-child(6) { --bar-color: var(--red-60); }

/* ------ */
/* Footer */
/* ------ */

.footer {
  --bg-color: var(--purple-80);
  --text-color: var(--white);
  --link-color: var(--white);
  --link-hover-color: var(--white);

  background-color: var(--bg-color);
  padding-block: var(--spacing-layout-half);
}

/* ------------------ */
/* Flourishes/effects */
/* ------------------ */

/* Fade in animation */

@media (prefers-reduced-motion: no-preference) {

  /* Fade in */

  .fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
  }
  
  .fade-in.is-visible {
    opacity: 1;
  }

  @media (min-width: 768px) {
    .fade-in.is-visible {
      --desktop-delay: 0s;

      transition-delay: var(--desktop-delay);
    }
  }
}

/* Fade up animation */

@media (prefers-reduced-motion: no-preference) {

  /* Fade up */

  .fade-up {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
  }
  
  .fade-up.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  @media (min-width: 768px) {
    .fade-up.is-visible {
      --desktop-delay: 0s;

      transition-delay: var(--desktop-delay);
    }
  }
}

/* Underline */

.underline {
  --thickness: 0.5em;
  --underline-color: var(--white);

  background-image: linear-gradient(
    var(--underline-color),
    var(--underline-color)
  );

  background-size: 100% var(--thickness);
  background-position: bottom 0.15em left;
  background-repeat: no-repeat;
}

@keyframes underline {
  0% {
    background-size: 0% var(--thickness);
  }
  100% {
    background-size: 100% var(--thickness);
  }
}

@media (prefers-reduced-motion: no-preference) {  
  .underline.is-visible {
    animation: underline ease 2s;
  }

  @media (min-width: 768px) {
    .underline.is-visible {
      --desktop-delay: 0s;

      transition-delay: var(--desktop-delay);
    }
  }
}

/* ----- */
/* Video */
/* ----- */

.video {
  border: var(--thick) solid var(--white);
  box-shadow: var(--shadow-medium);
  
}

.video > * {
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
}

/* ------------- */
/* Cookie notice */
/* ------------- */

.cookie-notice {
	background-color: var(--white);
	box-shadow: var(--shadow-medium);
  border: var(--hairline) solid var(--black-10);
	bottom: 0;
	color: var(--black);
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--font-size-small);
	left: 0;
	line-height: var(--line-height-small);
	margin: auto;
	max-width: calc(var(--grid-max-width) / 2);
	padding: var(--spacing-component-3);
	position: fixed;
	right: 0;
	z-index: 999;
}

.cookie-notice__close-button {
  background-color: var(--purple-80);
	box-shadow: var(--shadow-medium);
	color: var(--white);
  display: block;
  font-weight: bold;
  margin-block-start: var(--spacing-layout-half);
  min-width: var(--spacing-layout-6);
  padding: var(--spacing-component-3);
  text-align: center;
	text-decoration: none;
}

.cookie-notice__close-button:hover {
  background-color: var(--purple-60);
  color: var(--white);
}

@media only screen and (min-width: 768px) {
	.cookie-notice {
		border-radius: 0.25rem;
		bottom: 1rem;
	}
	.cookie-notice__close-button {
		float: right;
    padding: var(--spacing-component-2) var(--spacing-component-3);
	}
}