/* Block 1 – Design tokens (colors + typography) */
:root {
  color-scheme: light dark;

  /* Colors */
  --color-background: light-dark(#ffffff, #000000);
  --color-text: light-dark(#000000, #e5e5e5);
  --color-link: light-dark(#0043b8, #92d9ff);
  --color-border: light-dark(#000000, #626262);
  --color-hover: light-dark(#0002, #fff2);
  --color-scroll: light-dark(#0003, #fff3);

  /* Typography – desktop values */
  --border-width: 0.5px;
  --navlink-font-size: 14px;
  --body-font-size: 14px;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-font-family: Arial, sans-serif;
  --heading-font-family: Arial, sans-serif;
  --heading-font-weight: 700;
  --heading-line-height: 1.25;

  /* Anna: these are kinda random tbh */
  --font-size-h1: 48px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;

  --scroll-size: 12px;
  --header-height: 61px;
  --media-gap: 5vw;
  --border: var(--border-width) solid var(--color-border);
}

/* Base elements */
body {
  display: flex; flex-direction: column;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  overflow: hidden;
}

a {
  color: var(--color-link);
  text-underline-offset: 30%;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

header {
  display: flex; gap: 15px;
  align-items: center; place-content: space-between;
  position: fixed;
  max-height: 60px; width: calc(100% - 80px); z-index: 3;
  padding: 20px 40px;
  border-bottom: var(--border);
  nav {
    display: flex; gap: 40px;
    a {font-size: var(--navlink-font-size)}
  }
  a {
    text-transform: uppercase;
    color: var(--color-text);
    &:not(
      :hover, :focus,
      body:has(#works-preview) a[href="/"]:not(#logo_link),
      body:has(article) a[href="/"]:not(#logo_link),
      body:has(.info_right) a[href="/about"]
    ) {text-decoration: none}
    &:hover, &:focus {
      color: var(--color-link); font-weight: bold;
    }
  }
  #logo_link {font-weight: bold}
}

#main {
  margin-top: var(--header-height);
  /* Home Page */
  &:has(#works-preview) {
    display: grid; grid-template-columns: 1fr 1fr;
    ul {
      display: flex; flex-direction: column;
      padding: 0; margin: 0;
      height: calc(100svh - var(--header-height));
      overflow: hidden; scrollbar-gutter: stable;
      border-right: var(--border);
      &:hover {overflow-y: auto}
      li {
        width: calc(100% + var(--scroll-size));
        border-bottom: var(--border);
        &::marker {
          content: ' '; color: transparent; font-size: 0px;
        }
        a {
          display: flex; gap: 15px;
          align-items: center; place-content: start;
          max-height: 60px;
          padding: 20px 40px;
          text-transform: uppercase;
          text-decoration: none;
          color: var(--color-text);
          &.active, &:hover, &:focus {
            background:var(--color-hover);
            .title {font-weight: bold}
          }
          p {margin: 0}
          .img {display: none}
        }
      }
    }
    #works-preview {
      width: 50%; height: calc(100svh - var(--header-height));
      position: fixed; right: 0; top: var(--header-height);
      background-size: cover; background-position: center;
      background-repeat: no-repeat;
    }
  }
  /* Work Page */
  &:has(.work_content) {
    padding: 20px 40px 20px 40px;
    height: calc(100svh - 101px);
    overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
    h1 {
      display: flex; flex-wrap: wrap; gap: 5px;
      align-items: center; place-content: start;
      font-size: var(--navlink-font-size);
      margin: 0 0 20px 0;
      a:not(:hover, :focus), p {color: var(--color-text)}
      a, p {font-weight: normal; margin: 0}
    }
    .work_hero {
      display: flex; flex-wrap: wrap; gap: var(--media-gap);
      video {
        min-height: 170px; height: fit-content;
        align-self: end;
      }
    }

    .work_hero :is(img, video) {
        /* Commented out because it made single images half width on desktop */
        /* flex: 0 0 calc(50% - var(--media-gap) / 2); */
        /* max-width: calc(50% - var(--media-gap) / 2); */
        min-width: 0;
        height: auto;
    }
    
    .work_gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--media-gap);
      margin: var(--media-gap) 0;
      .gallery_cell {
        display: flex;
        min-height: 0;
        min-width: 0;
        :is(img, video) {
          display: block;
          min-width: 0;
          min-height: 0;
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }
        /* full: span 2 columns, media scales to fit cell */
        &.position_full {
          grid-column: 1 / -1;
        }
        &.position_full :is(img, video) {
          width: 100%;
          height: 100%;
          margin: 0;
        }
        /* center: span 2 columns, image centered at 75% width */
        &.position_center {
          grid-column: 1 / -1;
          place-content: center;
          align-items: center;
        }
        &.position_center :is(img, video) {
          width: auto;
          height: auto;
          max-width: 75%;
          margin: 0;
        }
        /* half: single cell, image centered, scaled to fit */
        &.position_half {
          place-content: center;
          align-items: center;
        }
        &.position_half :is(img, video) {
          width: 100%;
          height: auto;
          margin: 0;
        }
        /* top-left: margin right + bottom */
        &.position_top-left {
          place-content: start;
          align-items: start;
        }
        &.position_top-left :is(img, video) {
          margin-right: var(--media-gap);
          margin-bottom: var(--media-gap);
          width: 100%;
          height: auto;
        }
        /* top-right: image anchored top-right; margin left + bottom */
        &.position_top-right {
          place-content: end;
          align-items: start;
        }
        &.position_top-right :is(img, video) {
          margin-left: var(--media-gap);
          margin-bottom: var(--media-gap);
          width: 100%;
          height: auto;
        }
        /* bottom-left: image anchored bottom-left; margin right + top */
        &.position_bottom-left {
          place-content: start;
          align-items: end;
        }
        &.position_bottom-left :is(img, video) {
          margin-right: var(--media-gap);
          margin-top: var(--media-gap);
          width: 100%;
          height: auto;
        }
        /* bottom-right: margin left + top */
        &.position_bottom-right {
          place-content: end;
          align-items: end;
        }
        &.position_bottom-right :is(img, video) {
          margin-left: var(--media-gap);
          margin-top: var(--media-gap);
          width: 100%;
          height: auto;
        }
      }
      /* media_gap_none: full-width grid, no gaps/margins; center = full, corners = half */
      &.media_gap_none {
        margin: 0;
        .gallery_cell.position_center {
          place-content: stretch;
          align-items: stretch;
        }
        .gallery_cell.position_center :is(img, video) {
          width: 100%;
          height: 100%;
          max-width: none;
          margin: 0;
        }
        .gallery_cell.position_top-left,
        .gallery_cell.position_top-right,
        .gallery_cell.position_bottom-left,
        .gallery_cell.position_bottom-right {
          place-content: center;
          align-items: center;
        }
        .gallery_cell.position_top-left :is(img, video),
        .gallery_cell.position_top-right :is(img, video),
        .gallery_cell.position_bottom-left :is(img, video),
        .gallery_cell.position_bottom-right :is(img, video) {
          margin: 0;
          width: 100%;
          height: auto;
        }
      }
    }
    .logo_gallery {
      display: flex; flex-wrap: wrap; gap: 20px 40px;
      padding-top: 40px; padding-bottom: 20px;
      border-top: var(--border);
      img {height: 60px; width: fit-content;}
    }
    img, video {
      width: 100%; max-width: 100%;
      &.media_25 {max-width: calc(25% - var(--media-gap) / 2)}
      &.media_50 {max-width: calc(50% - var(--media-gap) / 2)}
      &.media_75 {max-width: calc(75% - var(--media-gap) / 2)}
    }
    .work_content {
      display: flex; gap: 20px;
      align-items: start; place-content: space-between;
      padding: 20px 0;
      .text {
        max-width: 600px;
      }
      .meta {
        display: flex; flex-direction: column; min-width: 200px;
      }
    }
  }
  /* Info Page */
  &:has(.info_right) {
    display: grid; grid-template-columns: 1fr 1fr;
    height: calc(100svh - var(--header-height));
    overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
    .info_left {
      display: flex; flex-direction: column; gap: 40px;
      padding: 40px;
      img {
        width: 100%; max-width: 100%;
        &.media_25 {max-width: 25%}
      }
    }
    .info_right {
        border-left: var(--border);
        .description {
            display: flex; flex-direction: column; gap: 20px;
            border-bottom: var(--border);
            padding: 40px;
            p {font-size: 20px; margin: 0}
            a {font-weight: bold}
        }
        .row {
            display: flex; flex-direction: column;
            padding: 40px;
        }
        .policies {
          border-top: var(--border);
          display: flex; flex-direction: row; gap: 8px;
          a:not(:hover, :focus) {color: var(--color-text)}
        }
        h3 {
          margin: 0; font-size: 14px;
          &:not(:first-of-type) {margin-top: 40px}
        }
        ul {
          padding: 0 20px; margin: 15px 0 0 0;
        }
        li {
            margin: 10px 0 10px 10px; place-content: start;
            p {margin: 0; display: inline}
            a:not(:hover, :focus) {color: var(--color-text)}
        }
    }
  }
  /* Policy Pages */
  &:has(.back-link) {
    padding: 40px;
    height: calc(100svh - var(--header-height) * 2.308);
    overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
    article.container {
      max-width: 800px;
      &.content {margin-bottom: 40px}
    }
  }
}

/*Fonts*/

@font-face {
  font-family: 'icons';
  src: url('/assets/fonts/icons.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icons' !important;
  font-style: normal; font-weight: normal;
  font-variant: normal; text-transform: none;
  speak: never; line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 10px;
}
.icon-arrow:before {content: "\e900"}


/*Scrollbar*/ ::-webkit-scrollbar {
  width:var(--scroll-size); min-height:var(--scroll-size);
  border-left: var(--border);
  background: transparent!important;
}
::-webkit-scrollbar-thumb {
  background: var(--color-scroll)!important;
  border-top: var(--border);
  border-bottom: var(--border);
  border-radius: 0px; min-height:var(--scroll-size);
}
::-webkit-scrollbar-thumb:hover{
  background: var(--color-text)!important;
}
::-webkit-scrollbar-corner {background: transparent!important}

/*Responsive*/

@media (width < 768px) {
  :root {
    --body-font-size: 14px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
  }
  ::-webkit-scrollbar {
    width: 0; height: 0;
    border-left: 0;
  }
  ::-webkit-scrollbar-thumb {
    border-right: var(--border);
    border-left: var(--border);
  }
  header {
    padding: 20px; width: calc(100% - 40px);
    nav {gap: 20px}
  }
  /* Home Page */
  #main:has(#works-preview) {
    grid-template-columns: 1fr;
    ul {
      overflow-y: auto; border-right: 0;
      height: calc(100svh - var(--header-height));
      a {
        padding: 20px!important;
        .img {
          display: flex!important;
          width: 40px; height: 40px; min-width: 40px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
    #works-preview {display: none}
  }
  /* Info Page */
  #main:has(.info_right) {
    display: flex; flex-direction: column;
    .info_left, .info_right .row {padding: 20px}
    .info_left {
      display: flex; flex-direction: row;
      overflow-x: auto; gap: 20px;
      min-height: 210px; height: fit-content;
      width: fit-content;
      img {
        height: 200px; min-height: 200px; object-fit: contain;
        width: fit-content; max-width: 100%!important;
      }
    }
    .info_right {
      border-left: 0;
      .description {
        padding: 20px;
        p {font-size: var(--body-font-size)}
      }
    }
  }
  /* Work Page */
  #main:has(.work_content) {
    padding: 20px;
    .work_content {
      flex-direction: column;
      padding-bottom: 40px;
    }
    .work_gallery {
      grid-template-columns: 1fr;
      gap: calc(var(--media-gap) / 2);
    }
    .work_gallery:not(#main:has(.logo_gallery) .work_gallery) {
      margin-bottom: 0;
    }
    .work_hero :is(img, video) {min-width: 100%}
    .work_gallery {
      gap: 20px; margin: 20px 0;
      /* On mobile, non-full media should not stretch full width,
         so you can visually tell which `position_*` mode is used. */
      .gallery_cell:not(.position_full) :is(img, video) {
        min-width: 0;
        max-width: 80%;
      }
      .gallery_cell.position_full :is(img, video) {
        min-width: 100%;
        max-width: 100%;
      }
      &.media_gap_none {
        gap: 0;
        margin: 0;
      }
      &.media_gap_none .gallery_cell :is(img, video) {
        min-width: 100%;
        max-width: 100%;
      }
    }

    img {
      &.media_25 {max-width: calc(50% - var(--media-gap) / 2)}
      &.media_50, &.media_75 {max-width: 100%}
    }
    video {max-width: 100%!important}
  }
    /* Policy Pages */
  #main:has(.back-link) {
    padding: 20px;
  }
}