:root {
  /* Vertical ratio */
  --ratio: 1.5;
  /* Default font size in any browser */
  --s0:  1rem;
  /* Positive harmonic scale, s1 = 1.5 */
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  /* Negative harmonic scale */
  --s-1: calc(var(--s0) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));

  /* Colors */
  --light: hsl(0, 0%, 80%);
  --dark: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  --red: hsl(0, 97%, 46%);
  --dark-red: hsl(0, 97%, 40%);

  /* Max width measure */
  --max-measure: 60ch;

  /* Viewport dependent font size */
  /* font-size: calc(var(--s0) + 0.5vw); */

  font-family: sans-serif;
  color: var(--white);
  line-height: var(--ratio);
}

* {
  /* Count border inside box */
  box-sizing: border-box;
  /* Prevent wide text */
  max-inline-size: var(--max-measure);
}

/* Fix MacOS font smoothing. */
body {
  -webkit-font-smoothing: antialiased;
}

/* Override max measure */
html,
body,
div,
header,
nav,
main,
footer,
cluster {
  max-inline-size: none;
}

h1 {
  font-size: var(--s3);
}

h2 {
  font-size: var(--s2);
}

h3 {
  font-size: var(--s1);
}

/* Vertical stack */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  
}

/* Reset vertical margins (> * stop recursion) */
.stack > * {
  margin-block: 0;
}

/* Add marging start fron 2nd element  (> * + * stop recursion) */
.stack > * + * {
  margin-block-start: var(--s2);
}

/* Shorter stack */
.stack.short > * + * {
  margin-block-start: var(--s-1);
}

/* Center */
center, .center {
  /* Exclude padding from width */
  box-sixing: content-box;
  max-inline-size: var(--max-measure);
  /* Left and right margins */
  margin-inline: auto;
  /* Paddings */
  padding-inline-start: var(--s1);
  padding-inline-end: var(--s1);
}

/* Cluster */
cluster, .cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  /* Control layout */
  /* space-between: left and right */
  /* center: all center */
  justify-content: space-between;
  align-items: center;
}

/* Frame */
/* Supports single child, img or video */
/* Pick aspect ratio (16/9, 4/3, 1/1) */
.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video,
.frame > iframe {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Icon */
.icon {
  height: 2cap;
  width: 2cap;
  color: var (--white);

  &:hover {
    opacity: 0.8;
  }
}

/* --- */

/* Custom */
body {
  background-color: var(--dark);
  padding: unset;
  margin: unset;
}

body.home {
  background-image: url('/img/background.jpg');
  background-repeat: no-repeat;
  background-position: center calc(80% + var(--s0));
  background-size: cover;
}

a {
  color: var(---white);
  text-decoration: none;
}

a.button {
  background-color: var(--red);
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--s0) var(--s1);
  border-radius: var(--s3);
  text-decoration: none;
  gap: var(--s-3);

  &:hover {
    text-decoration: none;
    background-color: var(--dark-red);
  }
}

.center {
  max-inline-size: 120ch;
}

header .cluster, main .cluster {
  justify-content: center;
}

header {
  background-color: var(--red);
  text-transform: uppercase;
  padding: var(--s-2) 0;
  text-align: center;

  &:hover {
    background-color: var(--dark-red);
  }

  .cluster {
    gap: var(--s-3);
  }

  .icon {
    width: 1.7cap;
    height: 1.7cap;
  }

  .logo {
    display: block;
    border: 2px solid var(--red);
    padding: 0 var(--s-2);

    :first-child {
      display: inline-block;
      font-family: "Baskervville", serif;
      font-size: 1.2rem;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -2px;
      line-height: 1.2rem;
      margin-right: 2px;
      vertical-align: 3px;
    }

    :last-child {
      display: inline-block;
      font-family: "Oswald", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 1.5rem;
      letter-spacing: -1px;
    }

    &:hover {
      border-color: var(--dark-red);
    }
  } 
}

main {
  text-align: center;

  h2 {
    font-family: "Baskervville SC", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-display: block;
    font-size: clamp(var(--s1), 3vw, var(--s2));
    line-height: clamp(var(--s1), 3vw, var(--s2));
  }

  h2 span {
    font-size: clamp(var(--s1), 4.5vw, var(--s3));
  }

  h1 {
    font-size: clamp(var(--s3) + 0.5rem, 15vw, var(--s5) + 1rem);
    line-height: clamp(var(--s3) + 0.5rem, 15vw, var(--s5) + 1rem);
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -2px;
    font-display: block;
  }

  nav.cluster {
    font-family: "Baskervville", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: calc(var(--s0) + 0.5vw);
    /* line-height: calc(var(--s0) + 0.5vw); */
    font-style: normal;
    font-display: block;
    gap: var(--s-3) var(--s2);
    align-items: flex-start;

    a {
      position: relative;
      display: inline-block;
    }

    a:hover {
      text-decoration: none;
    }

    a::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 2px;
      transform: translateX(-50%);
      border-bottom: 2px solid var(--red);
      transition: width .2s ease;
    }

    a:hover::after {
      width: 100%;
    }

    a.current::after {
      width: 100%;
    }
  }
}

dialog {
  border: 0;
  padding: 0;
  background: var(--dark);
  width: 100vw;

  &::backdrop {
    background: var(--dark);
    opacity: 0.8;
  }
}

.home {
  .empty {
    height: calc(var(--s4) + 40vw);
  }
}

.event {
  background-image: url('/img/event.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;

  header {
    background-color: unset;
  }

  .empty {
    height: calc(25rem + 15vw);
  }

  .logo {
    border-color: var(--white);

    &:hover {
      border-color: var(--light);
    }
  }

  main {
    max-inline-size: 110ch;
  }

  h2 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: var(--s-1);
  }

  h1 {
    font-size: clamp(var(--s2), 5vw, var(--s4));
    line-height: clamp(var(--s2), 5vw, var(--s4));
    letter-spacing: var(--s-1);
  }

  p {
    font-family: "Baskervville", serif;
    font-size: var(--s0);
    text-shadow: var(--dark) 0px 2px 20px;
    max-inline-size: 110ch;
  }

  footer nav ul:nth-child(2) {
    display: none;
  }
}

section.content {
  text-align: left;
  max-inline-size: 60ch;

  iframe {
    width: 60vw;
  }

  iframe.vote {
    filter: invert(80%);
  }
}

footer {
  font-size: 0.8rem;

  ul, li {
    all: unset;
  }

  nav.cluster {
    justify-content: center;
    align-items: center;
    gap: var(--s-1) var(--s3);
  }

  nav ul:first-child li:first-child .icon {
    width: 2.5cap;
    height: 2.5cap;
  }

  nav ul:nth-child(2) li {
    border: 1px solid var(--white);
    padding: var(--s-3) var(--s-1);
  }

  nav ul:last-child a {
    color: var(---white);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;

    &:hover {
      border-bottom-color: var(--white);
    }
  }
}