/* VARIABLES */
:root{
    --bg-color: #FDF9EE;
    --bg-color-hover: #CECABD;
    --dark-text-color: #1E1916;
    --yellow-200: #FFD37D;
    --blue-200: #B2C4FF;
    --yellow-600: #B27700;
    --smp-orange: #F47F43;
    --smp-orange-hover: #F69360;
    --secondary-700:#4C3300;
    --neutral: #64748B;
    --ease-1: cubic-bezier(.83,.23,.53,.93);

    /* Fraunces' SOFT/WONK axes. These have to be set on the element: the
       @font-face descriptor isn't applied everywhere (Safari), and any
       element-level font-variation-settings replaces it outright. Use as
       font-variation-settings: var(--fraunces-axes); and let the face's
       font-weight set wght. Add "wght" only to change the weight, and only
       on leaf text: the property inherits, so a wght on a heading would
       override the weight of any Quicksand inside it. */
    --fraunces-axes: "SOFT" 75, "WONK" 1;
    --fraunces-italic-axes: "SOFT" 100, "WONK" 1;

    --site-margin: clamp(1.125rem, 0.8693rem + 1.1364vw, 1.5rem);
    --curve-lg: 1.25rem;
    /* --site-margin: clamp(1.125rem, 1vw, 1.5rem); */
    --h1-size:   clamp(2.75rem, -1.125rem + 5.75vw, 5rem);
    --h2-size: clamp(2rem, -0.8125rem + 4.1667vw, 2.825rem);
    scrollbar-color: var(--dark-text-color) #b8b4a9;
    --card-lift: 0.3625rem;
}

/* REUSABLE STYLING */

.button-var-1{
  /* ADDED during integration: these came from reset.css's button{} rule,
     which is no longer loaded site-wide. The colour is explicit because
     these are <a> elements here, not the <button>s the prototype used,
     so they no longer inherit the document's text colour. */
  background-color: transparent;
  border: none;
  color: var(--dark-text-color);

  font-family: 'quicksand-bold';
  font-variation-settings: 'wght' 550;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 999px;

  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none;
  cursor: pointer;
}

.button-var-2{
  /* ADDED during integration: see .button-var-1 */
  border: none;

  font-family: 'quicksand-bold';
  font-variation-settings: 'wght' 550;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background-color: var(--smp-orange);
  color: var(--bg-color);

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;

  box-sizing: border-box;

  cursor: pointer;

  width: fit-content;

  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none;
  cursor: pointer;
}

.button-var-2 > img{
    margin-left: 0.5rem;
    height: 1rem;
    width: auto;
}

.button-var-3{
  /* ADDED during integration: see .button-var-1 */
  border: none;

  font-family: 'quicksand-bold';
  font-variation-settings: 'wght' 550;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  color: black;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;

  box-sizing: border-box;

  cursor: pointer;
  box-sizing: border-box;

  width: fit-content;

  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none;
  cursor: pointer;
}

@media	(hover:	hover)	and	(pointer:	fine){
  .button-var-1:hover{
    background-color: rgb(0 0 0 / 0.05);;
  }

  .button-var-2:hover{
    background-color: var(--smp-orange-hover);
  }

  .button-var-3:hover{
    background-color: rgb(240, 240, 240);
  }

  a:hover{
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  a.button-var-3:hover{
    text-decoration: none;
  }
}

/* Each family is one fixed weight of a variable font. The weight comes from
   the font-weight descriptor, which every current browser applies to the
   wght axis. The font-variation-settings descriptor is not applied reliably
   (Safari included), and these faces share files, so on its own it left
   some text at the file's default weight. It stays for SOFT/WONK where it
   does work. */
@font-face {
    font-family: 'fraunces-heading';
    src: url('/assets/landing/fonts/Fraunces-Straight.woff2') format('woff2');
    font-variation-settings: "wght" 500, "SOFT" 75, "WONK" 1;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'fraunces-heading-italic';
    src: url('/assets/landing/fonts/Fraunces-Italic.woff2') format('woff2');
    font-variation-settings: "wght" 600, "SOFT" 100, "WONK" 1;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'fraunces-heading-2';
    src: url('/assets/landing/fonts/Fraunces-Straight.woff2') format('woff2');
    font-variation-settings: "wght" 700, "SOFT" 75, "WONK" 1;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'quicksand-bold';
    src: url('/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-variation-settings: "wght" 700;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'quicksand-medium';
    src: url('/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-variation-settings: "wght" 500;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'quicksand-regular';
    src: url('/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-variation-settings: "wght" 400;
    font-weight: 400;
    font-display: swap;
}



.grid-bottom{
  
}

@media	screen	and	(max-width:	768px){
  :root{
    --h1-size:	clamp(1.875rem,	1.25rem	+	3vw,	2.5rem);
    --h2-size:	clamp(1.5rem,	1.125rem	+	1.8vw,	1.75rem);
    --site-margin:	1rem;
    --curve-lg:	1rem;
  }
}

/* TEMPLATE FOR MEDIA QUERIES */
@media screen and (max-width: 1536px){ /*	large desktop displays */
    	
}

@media screen and (max-width: 1200px){ /*	tablet	landscape:	reduce	column	counts	*/
    	
}

@media screen and (max-width: 900px){	/*	tablet	portrait:	stack	the	2-col	sections	*/	

}

@media screen and (max-width: 768px){	/*	phone:	mobile	nav,	mobile	hero,	single	column	*/

}

/* Moved from style.css during integration: shared by the site-wide footer,
   so it has to live in the globally-loaded sheet. */
.body-text{
    font-family: 'quicksand-bold';
    font-size: 1rem;
}

@media screen and (max-width: 768px){
    .body-text{
        font-family: 'quicksand-medium';
        font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
    }
}