@font-face {
  font-family: 'apercu';
  src: url('../fonts/apercu_regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'apercu';
  src: url('../fonts/apercu_bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'montserrat';
  src: url('../fonts/montserrat_bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-90deg);
  }
}
@keyframes parallax {
  from {
    background: var(--background-start);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  to {
    background: var(--background-end);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Custom properties */
:root {
  --font-main: 'apercu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'montserrat', Avenir, 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --color-theme: #2A70C0;
  --color-theme-dark: #002266;
  --color-theme-light: #C7DBF4;
  --color-theme-tint: #66CCDD;

  --color-accent: #7FC2C7;
  --color-accent-light: #3377bb;

  --color-highlight: #FAA809;

  --color-white: #ffffff;
  --color-light: #f0f0f0;
  --color-mid: #484848;
  --color-dark: #001133;

  --size-constrain: 50em; /* 1200px If you change this, update the Utopia values too */

/* easings */
  --confident-ease: cubic-bezier(0.39, 0.575, 0.565, 1);
  --bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth-ease: cubic-bezier(0.61, 1, 0.88, 1);

/* backgrounds */

  --background-start: 5% 80%  / 8vmax  url('../img/bubbles-blue.svg'),
  5% 180% / 8vmax  url('../img/bubbles-blue.svg'),
  90% 50% / 6vmax  url('../img/bubbles-yellow.svg'),
  95% 95% / 15vmax url('../img/waves.svg'),
  95% 30% / 6vmax  url('../img/bubbles-blue.svg'),
  10% 7% / 6vmax  url('../img/star.svg'),
  10% 30% / 4vmax  url('../img/bubbles-yellow.svg'),
  20% 40% / 2vmax  url('../img/wiggle.svg'),
  75% 40% / 10vmax  url('../img/star.svg');
  --background-end:
  5% -150%  / 8vmax  url('../img/bubbles-blue.svg'),
  5% -50% / 8vmax  url('../img/bubbles-blue.svg'),
  90% -50% / 6vmax  url('../img/bubbles-yellow.svg'),
  85% 55% / 10vmax url('../img/waves.svg'),
  95% -25% / 6vmax  url('../img/bubbles-blue.svg'),
  5% 7% / 3vmax  url('../img/star.svg'),
  10% 0% / 4vmax  url('../img/bubbles-yellow.svg'),
  10% 30% / 2vmax  url('../img/wiggle.svg'),
  95% 40% / 12vmax  url('../img/star.svg');
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1200,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.6944rem, 0.5979rem + 0.4828vw, 0.96rem);
  --step--1: clamp(0.8333rem, 0.7rem + 0.6667vw, 1.2rem);
  --step-0: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
  --step-1: clamp(1.2rem, 0.9545rem + 1.2273vw, 1.875rem);
  --step-2: clamp(1.44rem, 1.1114rem + 1.6432vw, 2.3438rem);
  --step-3: clamp(1.728rem, 1.291rem + 2.1849vw, 2.9297rem);
  --step-4: clamp(2.0736rem, 1.496rem + 2.8882vw, 3.6621rem);
  --step-5: clamp(2.4883rem, 1.7286rem + 3.7988vw, 4.5776rem);
  --step-6: clamp(2.986rem, 1.9911rem + 4.9747vw, 5.722rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1200,24,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.2045rem + 0.2273vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4091rem + 0.4545vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.6136rem + 0.6818vw, 1.125rem);
  --space-s: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.2273rem + 1.3636vw, 2.25rem);
  --space-l: clamp(2rem, 1.6364rem + 1.8182vw, 3rem);
  --space-xl: clamp(3rem, 2.4545rem + 2.7273vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.2727rem + 3.6364vw, 6rem);
  --space-3xl: clamp(6rem, 4.9091rem + 5.4545vw, 9rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.0682rem + 0.9091vw, 0.75rem);
  --space-2xs-xs: clamp(0.5rem, 0.2727rem + 1.1364vw, 1.125rem);
  --space-xs-s: clamp(0.75rem, 0.4773rem + 1.3636vw, 1.5rem);
  --space-s-m: clamp(1rem, 0.5455rem + 2.2727vw, 2.25rem);
  --space-m-l: clamp(1.5rem, 0.9545rem + 2.7273vw, 3rem);
  --space-l-xl: clamp(2rem, 1.0909rem + 4.5455vw, 4.5rem);
  --space-xl-2xl: clamp(3rem, 1.9091rem + 5.4545vw, 6rem);
  --space-2xl-3xl: clamp(4rem, 2.1818rem + 9.0909vw, 9rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.2727rem + 3.6364vw, 3rem);
}


/* Elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background-color: var(--color-theme);
  color: var(--color-white);
  margin-inline: 0;
  margin-block: 0;
}
body {
  background: var(--background-start);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font-main);
  font-size: var(--step-0);
  line-height: 1.6;
  margin-inline: 0;
  margin-block: 0;
  min-block-size: 100vb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  container-type: inline-size;
}
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: parallax auto linear;
    animation-timeline: scroll();
  }
}
img,picture,video,[role="img"] {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}
input,button,textarea,select {
  font: inherit;
}
ul,ol,dl,dt,dd,
p,figure,blockquote {
  hanging-punctuation: first last;
  text-wrap: pretty;
  margin-block-start: 0;
  margin-block-end: var(--step--1);
  margin-inline: 0;
}
h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-block-start: var(--step-0);
  margin-block-end: 0;
}
h1 {
  font-size: var(--step-6);
  margin-inline: auto;
  line-height: 1.25;
}
h2 {
  font-size: var(--step-5);
}
h3 {
  font-size: var(--step-4);
}
h4 {
  font-size: var(--step-3);
}
h5 {
  font-size: var(--step-2);
}
h6 {
  font-size: var(--step-1);
}
small {
  font-size: var(--step--1);
}
a {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-white);
}
a:hover,
a:focus {
  border-block-end: 2px solid;
}
a:has(img),
a:has([role="img"]) {
  border-block-end: 0;
}
nav ul {
  list-style: none;
  padding-inline: 0;
}
button {
  color: var(--color-light);
  color: var(--color-dark);
  padding: 0;
  margin: 0;
  cursor: pointer;
}
figure blockquote + figcaption {
  text-align: end;
}

*:focus {
  box-shadow: 0 0 0 3px var(--color-highlight);
}
*:focus:not(.focus-visible) {
  box-shadow: none;
}
*:focus-visible {
  outline: 3px dashed var(--color-highlight);
  outline-offset: 4px;
}

/* Utility classes */

.heading {
  font-family: var(--font-heading);
  font-weight: 700;
}
.step-6 {
  font-size: var(--step-6);
  margin-inline: auto;
}
.step-5 {
  font-size: var(--step-5);
  margin-inline: auto;
}
.step-4 {
  font-size: var(--step-4);
}
.step-3 {
  font-size: var(--step-3);
}
.step-2 {
  font-size: var(--step-2);
}
.step-1 {
  font-size: var(--step-1);
}
.step-0 {
  font-size: var(--step-0);
}
.step--1 {
  font-size: var(--step--1);
}
.step--2 {
  font-size: var(--step--2);
}

.text-light {
  color: var(--color-light);
}
.text-dark {
  color: var(--color-theme-dark);
}
.text-tint {
  color: var(--color-theme-tint);
}
.text-accent {
  color: var(--color-accent);
}
.text-bold {
  font-weight: 700;
}
.text-centre,
.text-center {
  text-align: center;
}

/* page structure */

body > header,
body > main,
body > footer {
  display: grid;
  grid-template-columns: minmax(auto, var(--size-constrain));
  justify-content: center;
  padding-inline: var(--step-0);
  padding-block: var(--step-0);
}

.Header {
  text-align: center;
}
.Header nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--step-0);
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}
.Header nav a {
  position: relative;
}
.Header nav a:hover,
.Header nav a:focus {
  border-block-end: none;
}
.Header nav a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: var(--step-1);
  block-size: 3px;
  transform: scaleX(0);
  transform-origin: center;
  background-color: var(--color-white);
  transition: 0.2s var(--confident-ease);
}
.Header nav a.button:after {
  content: none;
}
.Header nav a:hover::after,
.Header nav a:focus::after,
.Header nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.Header .logo {
  view-transition-name: logo;
  inline-size: clamp(320px, 8em, 100vi);
  margin-inline: auto;
  margin-block: var(--step-0);
}
h1:has(.logo) {
  padding-block-start: 5%;
  position: relative;
}
h1:has(.logo)::before,
h1:has(.logo)::after {
  content: ' ';
  position: absolute;
  background-repeat: no-repeat;
}
h1:has(.logo)::before {
  inline-size: 2.125em;
  block-size: 2.125em;
  background-image: url('../img/sunset.svg');
  inset-block-start: calc(50% - 3.5em);
  inset-inline-start: calc(50% - 5em);
}
h1:has(.logo)::after {
  inline-size: 2.5em;
  block-size: 2.5em;
  background-image: url('../img/ring.svg');
  inset-block-start: 0;
  inset-inline-end: calc(50% - 5em);
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  h1:has(.logo)::after {
    animation: rotation auto linear;
    animation-timeline: scroll();
  }
}
.Header .dt-start,
.Header .p-location {
  text-shadow: 0 0 1px var(--color-dark);
}

body > main {
  view-transition-name: main;
}

body > footer {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.Footer {
  padding-block: var(--step-4);
}
.Footer__social {
  list-style: none;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-1);
}
.Footer__intro,
.Footer__social {
  margin-block-end: var(--step-2);
}
.Footer nav li {
  margin-block-end: var(--step--1);
}
.Footer a:has(svg) {
  transition: color 0.2s var(--smooth-ease);
}
.Footer a:has(svg):hover,
.Footer a:has(svg):focus {
  color: var(--color-highlight);
}
@container (inline-size > 42em) {
  .Footer {
    display: flex;
  }
  .Footer__intro {
    inline-size: calc(74% - var(--step-2));
    margin-inline-end: var(--step-2);
  }
}


/* Components */

.button {
  display: inline-block;
  background-color: var(--color-theme-dark);
  color: var(--color-white);
  padding-block: var(--step--2);
  padding-inline: var(--step-2);
  border-radius: 99px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  transition: background-color 0.2s var(--smooth-ease);
}
.button:hover,
.button:focus {
  transition: background-color 0.5s var(--smooth-ease);
  background-color: var(--color-accent);
}
a.button {
  border-block-end: 0;
}

.button--light {
  background-color: var(--color-theme-light);
  color: var(--color-white);
}
.button--light:hover,
.button--light:focus {
  background-color: var(--color-theme);
}

.button--highlight {
  background-color: var(--color-highlight);
  color: var(--color-theme-dark);
}

.button--highlight:hover,
.button--highlight:focus {
  background-color: var(--color-white);
  color: var(--color-theme-dark);
}

.button--lg {
  padding-block: var(--step-0);
  padding-inline: var(--step-4);
}

.page {
  background-color: var(--color-white);
  color: var(--color-dark);
  margin-block: var(--step-2);
  padding: calc(var(--step-1) + 2.5vi);
  border-radius: 2.5vi;
  position: relative;
  container-type: inline-size;
}
.page::before,
.page::after {
  content: ' ';
  position: absolute;
  background-repeat: no-repeat;
}
.page::before {
  background-image: url('../img/ring.svg');
  inline-size: calc(2em + 3vi);
  block-size: calc(2em + 3vi);
  inset-inline-start: calc(-0.5em - 1.5vi);
  inset-block-start: calc(-0.7em - 1.5vi);
}
.page::after {
  background-image: url('../img/star.svg');
  inline-size: calc(2em + 2vi);
  block-size: calc(2em + 2vi);
  inset-inline-end: calc(0.3em - 1.5vi) ;
  inset-block-end: calc(1em - 1vi);
}
@media (prefers-reduced-motion: no-preference) {
  .page::before {
    animation: rotation auto linear;
    animation-timeline: scroll();
  }
  .page::after {
    animation: rotation auto linear;
    animation-timeline: scroll();
  }
}
.page a:not(.button) {
  color: var(--color-theme);
}
.page a:not(.button):hover,
.page a:not(.button):focus {
  color: var(--color-theme-dark);
}
.page .button:hover,
.page .button:focus {
  background-color: var(--color-theme);
}

.constrain {
  max-inline-size: 60em;
  text-align: center;
  margin-block: var(--step-5);
  margin-inline: auto;
}

.map {
  inline-size: 100%;
  display: block;
}

.split {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step-0);
  flex-wrap: wrap; /* Allow a grid of images */
}
.split img {
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--step-0);
}
@container (inline-size > 35em) {
  .split {
    flex-direction: row;
  }
  .split > * {
    width: calc(50% - (var(--step-0) /2 ));
  }
}


.Newsletter__inner {
  margin-block-start: var(--step-3);
}
.Newsletter__input {
  inline-size: 100%;
  padding-block: var(--step--1);
  padding-inline: var(--step-0);
  border-radius: 99px;
  background-color: var(--color-white);
  border: var(--color-white) 2.5px solid;
}
.Newsletter__button {
  inline-size: 100%;
  border: none;
  padding-block: var(--step--1);
  padding-inline: var(--step-0);
  margin-block-start: var(--step-0);
}
@container (inline-size > 30em) {
  .Newsletter__inner {
    display: flex;
  }
  .Newsletter__inner > * {
    margin: 0;
  }
  .Newsletter__input {
    flex: 1 0 70%;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .Newsletter__button {
    flex: 1 1 auto;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}

.Speakers__grid {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}
.Speakers__grid .Speakers__profile {
  text-align: center;
  flex: 1 0 250px;
}
.Speakers__profile {
  position: relative;
}
.Speakers__profile::before {
  content: ' ';
  position: absolute;
  inset: 0;
  inline-size: 15%;
  block-size: auto;
  background-image: url('/assets/img/star.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.Speakers__image {
  position: relative;
  border-width: calc(var(--step-0) / 2);
  border-style: solid;
  border-color: var(--color-highlight);
  border-radius: 100%;
  margin-inline: auto;
  transition: border-color 0.3s;
}
.Speakers__image::before {
  content: ' ';
  position: absolute;
  inset: -15%;
  inline-size: 130%;
  block-size: 130%;
  background-image: url('/assets/img/ring.svg');
  background-size: cover;
}
.Speakers__image::after {
  content: ' ';
  position: absolute;
  inset: 0 70%;
  inline-size: 30%;
  block-size: 100%;
  background-image: url('/assets/img/bubbles-yellow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.Speakers__link .Speakers__image {
  border-color: var(--color-theme);
}
.Speakers__link .Speakers__image::before {
  background-image: url('/assets/img/ring-blue.svg');
  transform-origin: center;
  transform: rotate(-20deg);
  transition: transform 0.3s;
  transition-timing-function: var(--bounce-ease);
}
.Speakers__link .Speakers__image::after {
  inset: 50% 70%;
  background-image: url('/assets/img/bubbles-blue.svg');
  transition: transform 0.3s;
  transition-timing-function: var(--bounce-ease);
}
.Speakers__image img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  border-radius: 100%;
}
.Speakers__link .Speakers__image img {
  filter: grayscale(50%) saturate(50%) brightness(100%) contrast(100%) sepia(75%) hue-rotate(180deg);
  transition: filter 0.3s;
}
.Speakers__link:hover,
.Speakers__link:focus {
  text-decoration: underline;
}
.Speakers__link:hover .Speakers__image,
.Speakers__link:focus .Speakers__image {
  border-color: var(--color-highlight);
}
.Speakers__link:hover .Speakers__image::before,
.Speakers__link:focus .Speakers__image::before {
  background-image: url('/assets/img/ring.svg');
}
@media (prefers-reduced-motion: no-preference) {
  .Speakers__link:hover .Speakers__image::before,
  .Speakers__link:focus .Speakers__image::before {
    transform: rotate(0deg);
  }
  .Speakers__link:hover .Speakers__image::after,
  .Speakers__link:focus .Speakers__image::after {
    transform: translateY(-50%);
  }
}
.Speakers__image img,
.Speakers__link:hover .Speakers__image img,
.Speakers__link:focus .Speakers__image img {
  filter: grayscale(25%) saturate(25%) brightness(110%) contrast(110%) sepia(50%) hue-rotate(0deg);
}
.Speakers__profile--page {
  margin-block-end: var(--step-0);
}
@container (inline-size > 25em) {
  .Speakers__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--step-0);
    align-items: flex-start;
    margin: 0;
  }
  .Speakers__grid .Speakers__profile {
    flex: 0 0 calc(50% - var(--step-0));
  }
  .Speakers__profile--page {
    inline-size: 50%;
    margin-inline-start: var(--step-0);
    float: inline-end;
  }
}
@container (inline-size > 35em) {
  .Speakers__grid .Speakers__profile {
    flex: 0 0 calc(33.3% - var(--step-0));
  }
  .Speakers__profile--page {
    inline-size: 33.3%;
    shape-outside: circle();
    margin-inline-start: var(--step-6);
  }
}

.Schedule {
  margin-block: var(--step-5);
}
.Schedule .Schedule__title {
  margin-block-start: 0;
  line-height: 1.25;
}
.Schedule .Schedule__content {
  margin-block-end: var(--step--1);
}
.Schedule .Schedule__content p {
  margin-block-end: 0;
}
@container (inline-size > 35em) {
  .Schedule {
    display: grid;
    grid-gap: var(--step-0);
    grid-template-columns: repeat(9, 1fr);
  }
  .Schedule .Schedule__time {
    grid-column: 1/3;
    line-height: 2;
    text-align: end;
    text-wrap: nowrap;
  }
  .Schedule .Schedule__content {
    grid-column: 3/9;
  }
}

.sponsors {
  display: flex;
  justify-content: center;
}
.sponsors__logo {
  margin-block-start: var(--space-l);
  max-height: var(--space-2xl);
}