@import "css/fonts.css";
@import "css/reset.css";
@import "css/variables.css";
html,
body {
  scroll-behavior: smooth;
}

body {
  font-family: var(--_font-family-text);
  background-color: var(--_background-color);
  color: var(--_text-color);

  :target {
    scroll-margin-block-start: 3cqi;
  }
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--_font-family-display);
  font-weight: bold;
  line-height: 1.18;
}

:is(p, ul, ol, h1, h2, h3, h4, h5, h6) {
  margin-block-end: var(--_gap-y);
}

:is(h2, h3, h4, h5, h6) {
  font-size: 1.125rem;
}
:is(h3, h4, h5, h6) {
  margin-block-end: 0.2em;
}

:is(p, li) {
  letter-spacing: 2%;
  font-size: 1rem;

  @container (width > 40em) {
    font-size: 0.875rem;
  }
}
:is(h1, h2, h3, h4, h5, h6, p, a, li, label) {
  color: var(--text-color, var(--_text-color));
}
a {
  text-decoration: none;
  text-underline-offset: 0.15em;
  &:hover,
  &:focus-visible {
    text-decoration: underline;
  }
  p & {
    text-decoration: underline;
    &:hover,
    &:focus-visible {
      text-decoration-thickness: 0.15em;
    }
  }
}

.-u-box {
  max-width: var(--_container-size);
  margin-inline: auto;
  box-shadow: 0 0 6rem rgba(0, 0, 0, 0.15);
  overflow-x: clip;
}

.-u-container {
  container-type: inline-size;
  display: grid;
  padding-inline: var(--_container-margin);
  column-gap: var(--_gutter);
  grid-template-columns: repeat(12, 1fr);

  > :where(*) {
    grid-column: 1/13;
  }
}

.site-header {
  padding-block: var(--_gap-y) calc(var(--_gap-y) * 3);
}
.site-footer {
  margin-block-start: 3rem;
  position: relative;
  padding-block: calc(var(--_gap-y) * 2);
  background: var(--_background-color-inverted);
  --text-color: var(--_text-color-inverted);

  img {
    filter: invert(1) brightness(5);
  }
  ul {
    padding: 0;
    list-style: none;
  }
  nav {
    display: contents;

    :is(li, p, h1, h2, h3, h4, h5, h6) {
      font-weight: 400;
      font-family: var(--_font-family-text);
      margin-bottom: 0.2em;
      font-size: 1rem;
      @container (width > 40em) {
        font-size: 0.625rem;
      }
    }

    > div:nth-child(1) {
      grid-column: 1/13;
      @container (width > 40em) {
        grid-row: 1/2;
        grid-column: 9/11;
      }
    }
    > div:nth-child(2) {
      grid-row: 2/3;
      grid-column: 7/13;
      @container (width > 40em) {
        grid-row: 1/2;
        grid-column: 11/13;
      }
    }
  }
  > div > a {
    display: block;
    grid-row: 2/3;
    grid-column: 1/7;

    @container (width > 40em) {
      grid-row: 1/2;
      grid-column: 1/4;
    }
  }
  .totop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1rem);
    aspect-ratio: 1;
    display: block;
    width: 1.5rem;
    translate: -50% 0;
    background: center/contain url("img/arrow-up.svg") no-repeat;

    &:hover,
    &:focus-visible {
      translate: -50% -10%;
    }

    span {
      width: 0;
      height: 0;
      overflow: hidden;
      display: block;
    }
  }
  .socialnav {
    display: flex;
    gap: 0.75rem;
    a {
      display: block;
      span {
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute;
      }
      img {
        filter: none;
        width: 1.25rem;
        display: block;
        aspect-ratio: 1;
      }
    }
  }
}

.block-title {
  grid-row: 1/2;
  z-index: 2;

  @container (width > 40em) {
    grid-row: 1/2;
    grid-column: 2/8;
  }

  h1 {
    text-transform: uppercase;
    font-size: 2.5rem;
    max-width: 70cqi;
    min-width: 15rem;
    line-height: 1;
    margin-block-end: 0.2em;
    @container (width > 40em) {
      max-width: none;
      font-size: 3.9375rem;
    }
  }
}

.block-subtitle {
  grid-row: 2/3;
  @container (width > 40em) {
    grid-row: 2/3;
    grid-column: 2/7;
  }
  p {
    hyphens: auto;
    text-wrap: balance;
    font-size: 1.9375rem;
    font-weight: bold;
    line-height: 1.18;
    font-family: var(--_font-family-display);

    @container (width > 22em) {
      hyphens: none;
    }

    @container (width > 40em) {
      font-size: 1.6875rem;
    }
  }
}

.block-collage {
  grid-row: 1/2;
  @container (width > 40em) {
    grid-row: 1/4;
    grid-column: 8/12;
  }
  img {
    max-width: none;
    width: 110%;
    margin-inline-start: 28cqi;
    margin-block-start: -50cqi;

    @container (width > 40em) {
      margin-inline: -5%;
      margin-block-start: -10cqi;
    }
  }
}
.block-intro {
  grid-row: 3/4;
  @container (width > 40em) {
    grid-row: 3/7;
    grid-column: 2/7;
  }
}
.block-map {
  grid-row: 7/8;
  display: grid;
  margin-block: -14cqi -20cqi;
  pointer-events: none;

  @container (width > 40em) {
    margin-block: -37cqi -37cqi;
  }
  > .map-container {
    --zoom: 6;
    position: relative;
    container-type: inline-size;
    width: calc(100% + var(--_container-margin) * var(--zoom));
    margin-inline: calc(var(--_container-margin) * var(--zoom) / -2);
    display: grid;
    @container (width > 40em) {
      --zoom: 2;
    }
    > * {
      grid-area: 1/1/2/2;
    }
  }

  svg {
    width: 45.7cqi;
    margin: 33.16cqi 0 0 27.73cqi;

    --stroke-length: var(--pathreveal-length, 1600);

    mask path {
      stroke-dasharray: var(--stroke-length);
      stroke-dashoffset: var(--stroke-length);
      animation-name: revealPath;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(50% 30%);
    }
  }
  b {
    font-size: 3cqi;
    width: fit-content;
    display: block;

    @container (width > 40em) {
      font-size: 2.1cqi;
    }
    &:after {
      content: "";
      width: 3.9cqi;
      aspect-ratio: 1;
      background: center/contain url("img/dot.svg") no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      animation: popin 1s linear 0s 1 normal both;
      animation-timeline: view();
      animation-range: cover 10% cover 50%;

      @container (width > 40em) {
        width: 3cqi;
      }
    }
  }
  b:nth-last-child(2) {
    margin: 32cqi 0 0 15cqi;
    @container (width > 40em) {
      margin-inline-start: 18cqi;
    }
    &:after {
      margin: 32cqi 0 0 26cqi;
    }
  }
  b:nth-last-child(1) {
    margin: 79cqi 0 0 77cqi;
    @container (width > 40em) {
      margin-block-start: 81cqi;
    }
    &:after {
      margin: 83cqi 0 0 72cqi;
      animation-range: cover 45% cover 80%;
    }
  }
}

.block-announcement {
  grid-row: 13/14;
  margin-block-end: 15cqi;
  
  @container (width > 40em) {
    margin-block-end: auto;
    padding-inline-end: 12%;
    grid-row: 4/5;
    grid-column: 8/12;
    display: block;
  }

  p {
    text-align: center;
    font-size: 2rem;
    padding-top: 0.5em;
    line-height: 1;
    font-family: var(--_font-family-display);
    @container (width > 40em) {
      font-size: 3rem;
    }
  }
}

.block-newsletter {
  grid-row: 8/9;
  margin-block-end: 15cqi;
  @container (width > 40em) {
    margin-block-end: auto;
    grid-row: 4/5;
    grid-column: 8/12;
  }

  form {
    padding-block: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    @container (width > 40em) {
      align-items: flex-start;
      row-gap: 0.5rem;
    }

    h2 {
      margin: 0;
      font-size: 1.125rem;
      text-align: center;
      font-weight: bold;
      line-height: 1.3;

      @container (width > 40em) {
        text-align: start;
        margin-bottom: 0.4rem;
      }

      strong {
        display: block;
        + br {
          display: none;
        }
        @container (width > 40em) {
          font-size: 1.875rem;
        }
      }
    }

    label {
      height: 0;
      display: block;
      position: absolute;
      width: 0;
      overflow: hidden;
    }
    input {
      border: none;
      border-radius: 4rem;
      width: calc(100% + 0.5rem);
      display: block;
      padding: 0.9em 1em;
      margin-inline: -0.5rem;
      text-align: center;
      @container (width > 40em) {
        padding-block: 0.4em;
        text-align: start;
      }
    }
    button {
      background: transparent;
      text-align: center;
      cursor: pointer;
      border: 0.125rem solid currentColor;
      border-radius: 4rem;
      padding: 0.3em 1em;
      font-weight: bold;
      &:hover,
      &:focus-visible {
        background: var(--_text-color-inverted);
      }
      @container (width > 40em) {
        align-self: flex-end;
      }
    }
  }
}
.block-about-1 {
  grid-row: 9/10;
  @container (width > 40em) {
    grid-column: 2/6;
    margin-block-end: -12rem;
  }
}
.block-diary {
  grid-row: 10/11;
  align-self: center;
  margin-block: 10cqi;
  @container (width > 40em) {
    margin-block: auto 0;
    grid-column: 1/8;
  }
  img {
    max-width: none;
    width: 107%;
    animation: appear 1s linear 0s 1 normal both;
    animation-timeline: view();
  }
}
.block-about-2 {
  grid-row: 11/12;
  @container (width > 40em) {
    grid-row: 10/11;
    grid-column: 8/12;
  }
}
.block-media {
  grid-row: 12/13;
  display: grid;
  column-gap: var(--_gutter);
  row-gap: var(--_gap-y);
  margin-block: 15cqi;
  @container (width > 40em) {
    margin-block: 11cqi;
    grid-column: 2/12;
    grid-template-columns: 4fr 2fr 4fr;
  }
  .video {
    > div {
      position: relative;
      background: #373737;
      aspect-ratio: 16/9;
    }
    video {
      height: 100%;
      width: 100%;
    }
    figcaption {
      margin-top: 1rem;
      font-size: 0.75rem;
    }

    button {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      border: none;
      width: 15%;
      aspect-ratio: 1;
      text-indent: -1000em;
      cursor: pointer;
      overflow: hidden;
      background: center/contain url("img/play.svg") no-repeat;
      &:hover,
      &:focus-visible {
        scale: 1.1;
      }
      &[aria-hidden] {
        display: none;
      }
    }

    &:nth-child(even) {
      @container (width > 40em) {
        grid-column-start: 3;
      }
    }
  }
}

@keyframes revealPath {
  from {
    stroke-dashoffset: var(--stroke-length);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  0%,
  33% {
    opacity: 0;
    translate: 0 20%;
  }

  50%,
  100% {
    opacity: 1;
    translate: none;
  }
}

@keyframes popin {
  0%,
  33% {
    opacity: 0;
    scale: 0.5;
  }

  50%,
  100% {
    opacity: 1;
    scale: 1;
  }
}