/* 
Theme Name: August Night 2025
Author: Corin Larraga
Version: 1.0
*/
 
@import url("css/nav.css");
@import url("css/content.css");
@import url("css/mobile.css");
@import url("css/footer.css");

@font-face {
    font-family: 'gt-america';
    src: url('fonts/gt-america/GT-America-LC-Standard-Light.woff2');
    font-style: normal;
}

@font-face {
  font-family: 'gt-america-mono';
  src: url('fonts/gt-america/GT-America-Mono-LC-Regular.woff2');
  font-style: normal;
}

.js-hide {
  display: none !important;
}

:root {
  --columns: 12;
  --navHeight: 65px;
  --mob-columns: 6;
  --gutter: 10px;
  --rowGutter: 12px;
  --navy-blue: #131519;
  --dark-blue: #010107;
  --deep-blue: #0D1D25;
  --cream: #D0C1A2;
  --cream2: #676256; /* use if opacity isn't an option - don't ask */
  --scale: 1;
}

ul, li { margin: revert; padding: revert; }

/* 7-14 */
.h1, .h2, .p1, .par1 p, .p2, .par2 p, .p3, .par3 p, .btn, .eyebrow, .p4, .par4 p, a, .general p, .general h2, h3, ul { 
	font-family: 'gt-america';
	color: var(--cream);
	font-weight: normal;
}
.btn, .eyebrow, .poem, input::placeholder, .email-input-wrapper input[type="email"] {
	font-family: 'gt-america-mono';
	text-transform: uppercase;
	color: var(--cream);
	font-weight: normal;
	font-size: 0.875rem;
}

.h1, .h2 { font-size: 3rem; letter-spacing: -0.04em; line-height: 120%; }
.h1.heading { line-height: 80%; } /* keeps vertical space tight */

.p1, .par1 p, .general h2 { font-size: 2.25rem; letter-spacing: -0.03em; line-height: 120%; }
  .p1 + p, .par1 p + p { margin-top: calc(var(--rowGutter) * 4); }
  
.p2, .par2 p, .general h3, ul { font-size: 1.5rem; letter-spacing: -0.03em; } 
  .p2 + p, .par2 p + p, .general p + p, .general p + h2, .general h2 + p { margin-top: calc(var(--rowGutter) * 2); }
  .p2 + .p1 { margin-top: calc(var(--scale) * 2.7rem); }
  
#nav a, .p3, .par3 p, #klaviyo-response { font-size: 0.875rem; }

.p4, .par4 p, .general p, .general ul { font-size: 0.9375rem; }
  .general ul li + li { margin-top: 0.9375rem;}

.bios p a { opacity: 0.7; text-decoration: underline; }
#footer-links a{ font-size: 0.75rem; }

.btn:after { content: url('img/ui/arrow.svg'); width: 10px; height: auto; display: inline-block; position: relative; left: 10px; transition: 0.2s; }
.btn.external:after { 
  content: url('img/ui/ext-arrow.svg');
  display: inline-block;
  position: relative;
  transition: transform 0.2s;
  bottom: 2px;
  width: 9px;
}
.btn:hover:after { left: 13px; }
.btn.external:hover:after {
  left: 10px;
  transform: translate(3px, -3px);
}
.btn.right { position: relative; left: -10px; align-self: flex-start;}

a.no-arr.btn::after {
  content: none;
}

a.no-arr.btn.right {
  left: 0;
}

a { text-decoration: none; }

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

  body {
	  background: var(--dark-blue);
    color: var(--cream);
  }
  
  body.nav-open { overflow: hidden; }

  .mt-2x { margin-top: calc(var(--rowGutter) * 2); }
  .mt-3x { margin-top: calc(var(--rowGutter) * 3); }
  .mt-4x { margin-top: calc(var(--rowGutter) * 4); }
  .mt-5x { margin-top: calc(var(--rowGutter) * 5); }
  .mt-6x { margin-top: calc(var(--rowGutter) * 6); }
  .mt-7x { margin-top: calc(var(--rowGutter) * 7); }
  .mt-9x { margin-top: calc(var(--rowGutter) * 9); }
  .mt-11x { margin-top: calc(var(--rowGutter) * 11); }
  .mt-12x { margin-top: calc(var(--rowGutter) * 12); }
  .mt-22x { margin-top: calc(var(--rowGutter) * 22); }
  
  .mb-2x { margin-bottom: calc(var(--rowGutter) * 2); }
  .mb-3x { margin-bottom: calc(var(--rowGutter) * 3); }
  .mb-4x { margin-bottom: calc(var(--rowGutter) * 4); }
  .mb-5x { margin-bottom: calc(var(--rowGutter) * 5); }
  .mb-6x { margin-bottom: calc(var(--rowGutter) * 6); }
  
  .pt-4x { padding-top: calc(var(--rowGutter) * 4); }
  .pt-6x { padding-top: calc(var(--rowGutter) * 6); }
  
  .pb-3x { padding-bottom: calc(var(--rowGutter) * 3); }
  .pb-4x { padding-bottom: calc(var(--rowGutter) * 4); }
  .pb-6x { padding-bottom: calc(var(--rowGutter) * 6); }
  
  body.error404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .container {
    margin-left:  calc(var(--gutter) * 2);
    margin-right: calc(var(--gutter) * 2);
  }
  
  .fh {
      display: flex;
	  align-items: center;
	  justify-content: center;
	  box-sizing: border-box;
	  min-height: 100dvh;
	  
    }
    
   .fh.vh { 
	  min-height: 100vh !important;
	}
	
	.dc { display: contents; }
	
  .fw.grid { width: 100%; }
  
  .lr-pad {
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 2);
  }

  /* basic 12 column stuff, use swap grid to do reordering on mobile */
  .grid, .swap-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    column-gap: calc(var(--gutter) * 2);
    row-gap: 0;
  }
  
  .hide { display: none !important; }
  .cell img { width: 100%; display: block;}
  .block, .desktop-only { display: block; }
  .mobile-only { display: none; }
  
  .flex { display: flex; }

  .cell {
    padding: 0;
  }

  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; }
  .span-12 { grid-column: span 12; }
  
  .start-2-span-10 { grid-column: 2 / span 10; }
  .start-5-span-4 { grid-column: 5 / span 4; }
  .start-6-span-3 { grid-column: 6 / span 3; }
  .start-6-span-6 { grid-column: 6 / span 6; }
  .start-6-span-7 { grid-column: 6 / span 7; }
  .start-8-span-5 { grid-column: 8 / span 5; }
  .start-10-span-3 { grid-column: 10 / span 3; }
  
  @media (max-width: 900px) {
	  
	  :root {
	    --columns: 12;
	    --gutter: 12px;
	    --rowGutter: 12px;
	  }
	  
    .container {
      margin-left: var(--gutter);
      margin-right: var(--gutter);
    }
    
    /* stack grid */
    .grid {
      grid-template-columns: 1fr !important;
    }
    .cell {
      grid-column: span 1 !important;
    }

    /* switches grid to flex column for reordering */
    .swap-grid {
      display: flex !important;
      flex-direction: column;
    }
    .swap-grid .cell {
      grid-column: auto !important;
      width: 100%;
    }

    /* manual ordering */
    .order-1 { order: 1; }
    .order-2 { order: 2; }
    .order-3 { order: 3; }
  }