@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

/* ------------------------------------------------------------------
     Grunt Grotesk Bold is a paid font hosted on MyFonts, not Google
     Fonts, so it can't be linked the same way. Once you've licensed it,
     drop the font files somewhere on your server / CDN and uncomment
     and fill in the @font-face block below. Until then, --font-display
     falls back to a bold, rounded system font so the layout still
     previews correctly.
  ------------------------------------------------------------------ */
  /*
  @font-face {
    font-family: 'Grunt Grotesk';
    src: url('assets/fonts/GruntGrotesk-Bold.woff2') format('woff2'),
         url('assets/fonts/GruntGrotesk-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  */

  :root {
    --text-primary: #1a1a1a;
    --text-muted: #b3b3b3;
    --border-color: #1a1a1a;
    --placeholder-bg: #cfcfcf;
    --bg: #ffffff;
    --gap: 30px;
    --small-gap: 15px;
    --font-display: 'Grunt Grotesk', 'Arial Rounded MT Bold', Arial, sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: 'Arimo', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; }

  /* ---------------- Cursor ---------------- */

  body, * {
    cursor: url('https://cdn.cursors-4u.net/previews/rgb-cursor-225bee85-preview-32.webp') 0 0, default, pointer !important;
  }

  /* body, * {
    cursor: default !important;
  }

  a:hover,
  a:active {
    cursor: url('https://cdn.cursors-4u.net/previews/rgb-cursor-225bee85-preview-32.webp') 0 0, pointer !important;
  }
    
  */


  /* ---------------- Navigation ---------------- */

  #column {
    height: calc(100vh - 57px);
  }

  #navbar {
    position: sticky;
    top: 0;       
    z-index: 1000;
  }

  #column {
    position: sticky;
    top: 57px;   
    z-index: 0;
    width: 218px;
  }


  /* ---------------- Highlight section ---------------- */

  .highlight {
    width: 100%-300px;
    margin-top: calc( -100vh + 60px );
    margin-left: 218px;
    padding: 48px 50px 60px;
    align-items: stretch;
  }

  .highlight-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .highlight-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    color: var(--text-primary);
  }

  .highlight-right {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  .contact-list {
    list-style: none;
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 0;
  }

  .contact-list li + li {
    margin-top: 14px;
  }

  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .contact-link:hover {
    text-decoration: underline;
  }

  .contact-arrow {
    width: 12px;
    height: 12px;
    flex: none;
    fill: currentColor;
  }

  .highlight .block-full video {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%-230px;
    box-shadow: 3px 3px 20px  rgb(234, 234, 234);
  }

  .video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--placeholder-bg);
    overflow: hidden;
  }

  .video-wrap video {
    object-fit: cover !important;
  }

  .highlight-caption {
    margin-top: 18px;
    text-align: right;
  }

  .highlight-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--text-primary);
  }



  /* ---------------- Main work grid ---------------- */

  main {
    width: 100%-300px;
    align-self: flex-end;
  }

  .grid {
    width: calc(100% - 218px);    
    margin-left: 218px;

    display: grid;
    padding: 48px 50px 80px;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    row-gap: 40px;
  }

  .card {
    display: flex;
    flex-direction: column;
  }

  .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--placeholder-bg);
    display: block;
    object-fit: cover;
  }

  .grid :nth-child(6) .card-image {
    box-shadow: 2px 2px 10px  rgb(220, 220, 220);
  }

  .card-category {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-muted);
  }

  .card-title {
    margin-top: 5px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.01em;
    color: var(--text-primary);
  }

  /*-------------------BREAKPOINTS----------------------*/


  /*------------I mean try moving the 4000px to 
                the default look from the adapta
                tions, it's broken----------------------*/
    @media (max-width: 4000px) {
    header nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .nav-links {
      flex: 1;
      min-width: 0;
    }
  }

  .credit {
    width: calc(100% - 218px);    
    margin-left: 218px;
    padding: 0px 50px;
    padding-bottom: 40px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-muted);
    text-align: center;
  }


  /*----------------Text scale for big screens-----------------*/
  @media (min-width: 1440px) {
    .nav-link {
      font-size: 14px;
    }

    .nav-links {
      margin-left: 120px;
    }

    #column {
    width: 300px;
    }

    .column-title {
    font-size: 14px;
    }

    .column-caption :nth-child(1) {
    font-size: 16px;
    letter-spacing: -0.01em;
    }

    .highlight {
    width: 100%-360px;
    }

    .column {
      width: 300px;
    }
    .column-image video {
    height: 330px !important;
  }

    .grid {
    width: calc(100% - 300px);    
    margin-left: 300px;
    }

    .highlight .block-full video {
    width: calc(100% - 80px); 
    margin-left: 80px;
  }

    .credit {
    width: calc(100% - 300px);    
    margin-left: 300px;
    }
  }

  /*-------------------TABLET----------------------*/

  @media (max-width: 800px) {
    main { 
      padding-left: 20px; 
      padding-right: 20px; }

    .grid { 
      padding: 0px 30px 80px;
    }

    .highlight {
      padding-left: 30px;
      padding-right: 30px;
      grid-template-columns: 1fr;
      row-gap: 30px;
    }
    .highlight-caption { text-align: left; }
  }

  @media (max-width: 800px)
  and (min-width: 481px) {
    .grid { 
      grid-template-columns: 1fr; 
    }
  }

  @media (max-width: 600px) {
    #column {
      width: 160px;
    }

    .highlight,
    .grid {
      margin-left: 160px;
      width: calc( 100% - 160px );
    }

  .credit {
    width: calc(100% - 160px);    
    margin-left: 160px;
    padding: 0px 30px;
  }
  }

  /*-------------------MOBILE----------------------*/

  @media (max-width: 480px) {
    #column {
      display: none;
    }

    .highlight {
      margin-top: 0px;
      margin-left: 0px;
      width: 100%;
      padding: 30px;
    }

    .grid {
      margin-left: 0px;
      width: 100%;
      gap: var(--small-gap);
      grid-template-columns: 1fr; 
    }

    .highlight-title,
    .card-title {
      font-size: 14px;
    }

    .card-category {
      font-size: 12px;
      margin-top: 7px;
    }

    .credit {
    width: 100%;    
    margin-left: 0px;
    padding: 0px 30px;
  }
  }