/* modern reset */

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

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


body {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
}

::selection {
  /* background-color: rgba(255, 0, 0, 0.75); */
  background-color: rgb(from var(--color-yellow) r g b / 0.35);
  color: #FFF;
}

h1 {
  line-height: 1;

  &:first-of-type {
    margin-top: 0;
  }
}

h2 {
  line-height: 1;
  scroll-margin-block-start: 4rem;

  padding-inline: 0.5ch;
  margin-inline: -0.5ch;


  &:focus-visible {
    outline-color: var(--color-yellow);
    outline-width: 1px;
    outline-style: dashed;
    outline-offset: 3px;
  }
}

h3, h4 {
  line-height: 1.1;
}

blockquote {
  margin-block: calc(var(--step-0 * 2)) !important;
  padding: calc(var(--step-0) * 1.5);
  font-style: italic;
  background-color: rgb(255 255 255 / 0.1);

  footer {
    margin-block-start: 1em;
  } 
}

a {
  color: var(--color-yellow);

  &:hover {
    text-decoration: none;
  }

  &:focus-visible {
    outline-color: var(--color-yellow);
    outline-width: 1px;
    outline-style: dashed;
    outline-offset: 3px;
  } 
}


button {
  background: none;
  border: var(--border);
  cursor: pointer;

  &:focus-visible {
    outline-color: var(--color-yellow);
    outline-width: 1px;
    outline-style: dashed;
    outline-offset: 3px;
  }
}

ul {
  .flow & {
    margin-inline-start: 1.5em;
  }
}

.flow {
  & > * + * {
    margin-block-start: 1em;
  }

  & > * + h3 {
    margin-block-start: 2em;
  }

  & > table + h3 {
    margin-block-start: 3em;
  }
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

table {
  th {
    text-align: left;
  }

  th, td {
    vertical-align: top;

    & + td, & + th {
      padding-inline-start: var(--step-0);
    }
  }

  tr + tr td {
    padding-block-start: var(--step-0);
  }


}
nav {
  position: fixed;
  bottom: var(--step-0);
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 100;

  ul {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    position: absolute;
    bottom: calc(100% + var(--space));
    left: max(var(--step--2), calc((100% - var(--max-width)) / 2));
    padding: calc(var(--step-0) * 0.75);
    margin: 0;
    pointer-events: auto;
    min-width: 16rem;
    list-style: none;
    background-color: black;
    border: var(--border);
    visibility: hidden;
    transform: translate(0, 5rem);
  }
  
  a {
    color: var(--color-red);
    text-decoration: none;
    display: block;
  
    &:hover {
      text-decoration: underline;
    }
  }
}

#nav-toggle {
  display: flex;
  pointer-events: auto;
  margin-left: max(var(--step--2), calc((100% - var(--max-width)) / 2));
  width: calc(var(--step-0) * 2);
  height: calc(var(--step-0) * 2);
  justify-content: center;
  align-items: center;

  .nav-icon,
  .nav-icon::before,
  .nav-icon::after {
    display: block;
    background: var(--color-red);
    height: 1px;
    width: var(--step-0);
    position: relative;
  }

  .nav-icon::before,
  .nav-icon::after {
    content: '';
    position: absolute;
    transition: all 100ms ease-in-out;
  }

  .nav-icon::before { bottom: 7px; }
  .nav-icon::after { top: 7px; }
}

/* when nav is opened */
#nav-toggle.opened {
  .nav-icon {
    background: transparent;
  }

  .nav-icon::before,
  .nav-icon::after {
    box-shadow: 0 0 0px 0.5px var(--color-red);
  }

  .nav-icon::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  .nav-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  + ul {
    visibility: visible;
    transform: translate(0, 0);
    transition: all 100ms ease-in-out;
  }
}
/* @link https://utopia.fyi/type/calculator?c=380,16,1.2,1120,20,1.25,5,2,&s=0.75|0.5,1.5|2|3|4,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.6944rem, 0.6402rem + 0.2282vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7477rem + 0.3604vw, 1rem);
  --step-0: clamp(1rem, 0.8716rem + 0.5405vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0139rem + 0.7838vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.1765rem + 1.1095vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.3617rem + 1.5425vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.5713rem + 2.1149vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 1.8072rem + 2.8678vw, 3.8147rem);
}

:root {
  --color-red: #F00;
  --color-yellow: #F8FACB;
  --max-width: 1200px;
  --border: 1px solid var(--color-red);
  --space: calc(var(--step-0) * 0.5);
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;

  &:has(dialog[open]) {
    overflow: hidden;
  }
}

.bordered {
  border: var(--border);
}

aside figure {
  position: relative;
  width: 100%;
  height: 100%;
}

aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

aside figcaption {
  --pad: calc(var(--step--1) / 2);
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.65);
  font-size: var(--step--1);
  cursor: pointer;

  &::before {
    content: "ℹ";
    flex-shrink: 0;
    line-height: 1;
  }

  & span {
    display: none;
    position: absolute;
    top: calc(100% + 0.3em);
    right: 0;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: var(--pad);
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 0.2em;
    z-index: 10;

    @supports (anchor-name: --x) {
      position: fixed;
      top: calc(anchor(bottom) + 0.3em);
      left: calc(anchor(center) - min(130px, 40vw));
      right: auto;
      position-try-fallbacks: --tooltip-right-align, --tooltip-left-align;
    }
  }

  &:hover span,
  &:focus span {
    display: block;
  }

  &:focus {
    outline: none;
  }
  
}

.container {
  position: relative;
  display: flex;
  gap: var(--space);
  width: calc(100% - var(--step--2) * 2);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--step-0) 0 var(--step-0) calc(var(--step-0) * 2.5);
  flex-direction: row; 

  @media screen and (orientation: portrait) {
    flex-direction: column-reverse;
  }
}

.main-container {
  --padding: clamp(var(--step-0), 2vw, var(--step-2));
  container-name: main-container;
  container-type: inline-size;
  padding: var(--padding);
  flex-grow: 1;
  min-height: calc(100dvh - var(--step-0) * 2);

  @media screen and (orientation: portrait) {
    min-height: calc(100dvh - var(--step-0) * 4);
  }

  .image-story & {
    padding: 0;
  }
}

.wrapper {
  max-width: 60ch;
  margin: 0 auto;
}

@container main-container (width > 60ch) {
  .wrapper { 
    margin-block-start: min(calc((100cqi - 60ch) / 2), 2rem);
  }
}


.aside-container {
  > div {
    position: sticky;
    top: var(--step-0);
    display: flex;
    gap: var(--space);
    flex-direction: column;
    z-index: 1;

    @media screen and (orientation: portrait) {
      flex-direction: row;
    }

    &:has(figcaption:hover, figcaption:focus) {
      z-index: 100;
    }
  }

  aside {
    width: var(--aside-size);   
    aspect-ratio: 1;
    flex-grow: 1;

    --aside-size: calc(100dvh / 3 - (var(--space) * 2));

    @media screen and (orientation: portrait) {
      --aside-size: calc(100dvw / 3 - (var(--space) * 2));
    }
    @media screen and (orientation: landscape) {
      height: var(--aside-size);
    }
  }
}

.image-story {
  display: flex;
  flex-direction: column;
  gap: var(--step-0);

  section {
    display: grid;
    grid-template-columns: 1fr calc(100dvh / 3 - (var(--space)));
    gap: var(--space);
    margin-block-start: var(--space);

    @media screen and (orientation: portrait) {
      grid-template-columns: 1fr;
      gap: 0;

      > p:last-child {
        border-top: none;
      }
    }

    > * {
      border: var(--border);
    }
  
    > p:last-child {
      align-self: start;
      padding: var(--step-0);
      position: sticky;
      top: var(--space);
    }

    > div {
      padding: var(--step-0);
    }
  }
}

video {
  outline: 1px solid var(--color-yellow);
  outline-offset: 1px;
  max-width: calc(100% - 2px);
}

audio {
  accent-color: var(--color-red);
  border: 1px solid var(--color-yellow);
  height: calc(var(--step-0) * 2);
  border-radius: var(--step-0);
}


.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2em;
}

.wrapper:has(.columns) {
  max-width: unset;
}

.main-container:has(.image-story) {
  padding: 0;
  border: none;

  .wrapper {
    max-width: unset;
  }
}


.template-videos .container {
  padding: 0 0 var(--space) calc(var(--step-0) * 2.5);
  /* padding: var(--step-0) 0 var(--step-0) calc(var(--step-0) * 2.5); */

  flex-direction: column;
}

.template-videos .container.intro {
  padding-block-start: var(--space);

  .bordered {
    padding: var(--space);
  }
}

.template-videos .container.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space);

  .video {
    padding: var(--space);
  
    video {
      outline: none;
      margin-block-end: calc(var(--space) * 2);
      accent-color: var(--color-red);

      &::cue {
        font-family: sans-serif;
        color: white;
        background: none;
        text-shadow: 0px 0px 6px rgba(0,0,0,0.5);
      }
    }

    h4 {
      font-weight: normal;
      font-style: italic;
    }

    p {
      margin-block-start: 1em;
    }
  }
}

.template-visualization {
  

  nav, .interactive-map {
    bottom: calc((100dvh - var(--v-anim-h)) / 2);
  }

}



@position-try --tooltip-right-align {
  left: auto;
  right: anchor(right);
}

@position-try --tooltip-left-align {
  left: anchor(left);
  right: auto;
}

#lightbox:not([open]) {
  display: none;
}

#lightbox {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  align-items: flex-end;
  border: none;
  padding: 0;
  background: transparent;
  max-width: 90dvw;
  max-height: 90dvh;
  margin: auto;
  overflow: visible;

  &::backdrop {
    background: rgba(0, 0, 0, 0.85);
  }

  figure {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space);
  }

  #lightbox-img {
    display: block;
    max-width: 90dvw;
    max-height: calc(90dvh - 7rem);
    object-fit: contain;
    width: 100%;
    height: auto;
    background-color: black;
  }

  #lightbox-caption {
    padding: var(--step--1);
    background: black;
    color: white;
    font-size: var(--step--1);
  }

  #lightbox-close {
    display: block;
    width: 2em;
    height: 2em;
    background: black;
    color: white;
    border: var(--border);
    font-size: var(--step-0);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
}