/* 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: "Maax", 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: 2px;
    outline-style: dashed;
    outline-offset: 3px;
  }
}

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: 2px;
    outline-style: dashed;
    outline-offset: 3px;
  } 
}


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

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

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

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

.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: max(
    var(--step-0) * 1.5, 
    calc(((100vw - var(--max-width)) / 2) + var(--step-0) * 0.25 )
  );
  z-index: 100;

  ul {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    position: absolute;
    bottom: calc(100% + var(--space));
    left: 0;
    padding: calc(var(--step-0) * 0.75);
    margin: 0;
    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;
  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;
}

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

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


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

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

.main-container {
  container-name: main-container;
  container-type: inline-size;
  padding: var(--step-0);
  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: 58ch;
  margin: 0 auto;
}

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


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

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

  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);
}

/* .video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
} */

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(320px, 1fr));
  gap: 2em;
}

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

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

  .wrapper {
    max-width: unset;
  }
}