/* ==========================================================================
   LAYOUT.CSS
   Karleigh Jackson | Executive Editorial Portfolio
   Version: 2.0
   ========================================================================== */


/* ==========================================================================
   RESET
   ========================================================================== */

   *,
   *::before,
   *::after{
       margin:0;
       padding:0;
       box-sizing:border-box;
   }
   
   html{
       scroll-behavior:smooth;
       -webkit-text-size-adjust:100%;
   }
   
   body{
   
       min-height:100vh;
   
       background:var(--color-background);
   
       color:var(--text-primary);
   
       font-family:var(--font-body);
   
       font-size:var(--fs-body);
   
       line-height:var(--lh-body);
   
       overflow-x:hidden;
   
       text-rendering:optimizeLegibility;
   
       -webkit-font-smoothing:antialiased;
       -moz-osx-font-smoothing:grayscale;
   
   }
   
   
   /* ==========================================================================
      MEDIA
      ========================================================================== */
   
   img,
   picture,
   video,
   canvas,
   svg{
   
       display:block;
   
       max-width:100%;
   
   }
   
   img{
   
       height:auto;
   
   }
   
   
   /* ==========================================================================
      LINKS
      ========================================================================== */
   
   a{
   
       color:inherit;
   
       text-decoration:none;
   
   }
   
   
   /* ==========================================================================
      LISTS
      ========================================================================== */
   
   ul,
   ol{
   
       list-style:none;
   
   }
   
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   
   button{
   
       font:inherit;
   
       background:none;
   
       border:none;
   
       cursor:pointer;
   
   }
   
   
   /* ==========================================================================
      FORM ELEMENTS
      ========================================================================== */
   
   input,
   textarea,
   select{
   
       font:inherit;
   
   }
   
   
   /* ==========================================================================
      TYPOGRAPHY
      ========================================================================== */
   
   h1,
   h2,
   h3,
   h4{
   
       font-family:var(--font-heading);
   
       font-weight:var(--fw-regular);
   
       line-height:var(--lh-heading);
   
       letter-spacing:var(--tracking-tight);
   
   }
   
   h1{
   
       font-size:var(--fs-h1);
   
   }
   
   h2{
   
       font-size:var(--fs-h2);
   
   }
   
   h3{
   
       font-size:var(--fs-h3);
   
   }
   
   h4{
   
       font-size:var(--fs-h4);
   
   }
   
   p{
   
       color:var(--text-secondary);
   
       max-width:65ch;
   
   }
   
   
   /* ==========================================================================
      PAGE CONTAINER
      ========================================================================== */
   
      .container{

        width: min(calc(100% - 4rem), var(--container-width));
    
        margin-inline: auto;
    
    }
   
   
   /* ==========================================================================
      CONTENT WIDTH
      ========================================================================== */
   
   .content{
   
       width:min(100%, var(--content-width));
   
   }
   
   .reading-width{
   
       width:min(100%, var(--reading-width));
   
   }
   
   
   /* ==========================================================================
      GRID SYSTEM
      ========================================================================== */
   
   .grid{
   
       display:grid;
   
       gap:var(--space-4);
   
   }
   
   .grid-2{
   
       display:grid;
   
       grid-template-columns:repeat(2,1fr);
   
       gap:var(--space-5);
   
   }
   
   .grid-3{
   
       display:grid;
   
       grid-template-columns:repeat(3,1fr);
   
       gap:var(--space-5);
   
   }
   
   .grid-4{
   
       display:grid;
   
       grid-template-columns:repeat(4,1fr);
   
       gap:var(--space-4);
   
   }
   
   
   /* ==========================================================================
      FLEX UTILITIES
      ========================================================================== */
   
   .flex{
   
       display:flex;
   
   }
   
   .flex-column{
   
       flex-direction:column;
   
   }
   
   .align-center{
   
       align-items:center;
   
   }
   
   .justify-center{
   
       justify-content:center;
   
   }
   
   .justify-between{
   
       justify-content:space-between;
   
   }
   
   .flex-wrap{
   
       flex-wrap:wrap;
   
   }
   
   .gap-sm{
   
       gap:var(--space-2);
   
   }
   
   .gap-md{
   
       gap:var(--space-4);
   
   }
   
   .gap-lg{
   
       gap:var(--space-6);
   
   }
     
   /* ==========================================================================
      STACK
      ========================================================================== */
   
   .stack-xs > * + *{
   
       margin-top:var(--space-1);
   
   }
   
   .stack-sm > * + *{
   
       margin-top:var(--space-2);
   
   }
   
   .stack-md > * + *{
   
       margin-top:var(--space-3);
   
   }
   
   .stack-lg > * + *{
   
       margin-top:var(--space-5);
   
   }
   
   .stack-xl > * + *{
   
       margin-top:var(--space-7);
   
   }
   
   
   /* ==========================================================================
      SPACING UTILITIES
      ========================================================================== */
   
   .mt-auto{
   
       margin-top:auto;
   
   }
   
   .text-center{
   
       text-align:center;
   
   }
   
   .full-width{
   
       width:100%;
   
   }
   
   
   /* ==========================================================================
      OVERFLOW
      ========================================================================== */
   
   .overflow-hidden{
   
       overflow:hidden;
   
   }
   
   .relative{
   
       position:relative;
   
   }
   
   .absolute{
   
       position:absolute;
   
   }
   
   
   /* ==========================================================================
      ACCESSIBILITY
      ========================================================================== */
   
   .visually-hidden{
   
       position:absolute;
   
       width:1px;
   
       height:1px;
   
       padding:0;
   
       margin:-1px;
   
       overflow:hidden;
   
       clip:rect(0 0 0 0);
   
       white-space:nowrap;
   
       border:0;
   
   }
   
   
   /* ==========================================================================
      REDUCED MOTION
      ========================================================================== */
   
   @media (prefers-reduced-motion: reduce){
   
       html{
   
           scroll-behavior:auto;
   
       }
   
   }