/* =====================================================
   Karen Laciste Website
===================================================== */

:root{
  --accent:#9f1836;
  --accent-dark:#7f132b;
  --text:#222;
  --muted:#666;
  --white:#fff;
  --border:#ececec;
  --max-width:1200px;
  --radius:999px;
  --transition:.3s ease;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Lato',sans-serif;
  font-weight:300;
  color:var(--text);
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
  transition:var(--transition);
}

.container{
  width:min(100% - 48px,var(--max-width));
  margin-inline:auto;
}

/* Header */

.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:1000;
}

.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:145px;
}

.logo img{
  height:85px;
}

.desktop-nav{
  display:flex;
  gap:2.5rem;
}

.desktop-nav a{
  font-weight:700;
  color:var(--accent);
  position:relative;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:var(--accent);
}

.mobile-toggle{
  display:none;
  border:none;
  background:none;
  font-size:2rem;
  color:var(--accent);
  cursor:pointer;
}

.mobile-nav{
  display:none;
  background:#fff;
  border-bottom:1px solid var(--border);
}

.mobile-nav a{
  display:block;
  padding:1rem 24px;
  color:var(--accent);
  font-weight:700;
}

/* Typography */

h1,h2,h3,h4,h5,h6{
  font-family:'Lato',sans-serif;
  font-weight:700;
  line-height:1.2;
}

h1{
  font-size:clamp(2rem,2.5vw,2.5rem);
  margin-bottom:1rem;
}

h2{
  font-size:2rem;
  margin-bottom:1.25rem;
}

.light{
  font-weight:300;
  color:var(--text);
}

.accent{
  color:var(--accent);
}

.eyebrow{
  color:var(--accent);
  font-size:1.35rem;
  font-weight:700;
  margin-bottom:1rem;
}

.intro{
  font-size:1.35rem;
  max-width:42rem;
}

/* Hero */

.hero{
  padding:5rem 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.hero-copy{
  order:1;
}

.hero-image{
  order:2;
  display:flex;
  justify-content:center;
}

.hero-image img{
  width:min(100%,520px);
}

/* Buttons */

.hero-buttons{
  display:flex;
  gap:1rem;
  margin:2rem 0 2.5rem;
}

.button{
  padding:15px 34px;
  border-radius:var(--radius);
  border:2px solid var(--accent);
  font-weight:700;
}

.button-primary{
  background:var(--accent);
  color:#fff;
}

.button-primary:hover{
  background:var(--accent-dark);
}

.button-outline{
  color:var(--accent);
}

.button-outline:hover{
  background:var(--accent);
  color:#fff;
}

/* About */

.about{
  padding-top:2rem;
  max-width:720px;
}

.about p{
  color:var(--muted);
}

/* Footer */

.site-footer{
  border-top:1px solid var(--border);
  padding:3rem 0;
  text-align:center;
}

.footer-logo img{
  height:70px;
  margin:0 auto 1.5rem;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-bottom:1.5rem;
}

.footer-links a{
  color:var(--accent);
  font-weight:700;
}

/* Responsive */

@media (max-width:900px){

  .desktop-nav{
    display:none;
  }

  .mobile-toggle{
    display:inline-block;
	float:right;
  }

  .mobile-nav.active{
    display:block;
  }

  .hero-grid{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-copy{
    display:flex;
    flex-direction:column;
    width:100%;
  }

  .hero-buttons{
    order:2;
  }

.hero-image{
  order:3;
  display:flex;
  justify-content:center;
}

  .about{
    order:4;
  }

  h1{
    font-size:clamp(2rem, 5vw, 4rem);
  }

  .intro{
    font-size:1.1rem;
  }

  .logo img{
    height:58px;
  }
}

/* Hero refinements */

.hero{
  min-height:calc(100vh - 92px);
  display:flex;
  align-items:center;
}

.hero-copy{
  max-width:620px;
}

.eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
}

h1{
  letter-spacing:-0.03em;
  margin-bottom:1.5rem;
}

.intro{
  color:#444;
  line-height:1.9;
  margin-bottom:.5rem;
}

.hero-image{
  align-self:center;
}

.hero-image img{
  width:min(100%,560px);
  transition:transform .45s ease;
}

.hero-image img:hover{
  transform:translateY(-6px);
}

/* Buttons */

.hero-buttons{
  margin-top:2.75rem;
  margin-bottom:4rem;
}

.button{
  min-width:170px;
  text-align:center;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.button:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(159,24,54,.16);
}

.button:focus-visible{
  outline:3px solid rgba(159,24,54,.25);
  outline-offset:4px;
}

/* About section */

.about{
  border-top:1px solid #efefef;
  padding-top:3rem;
}

.about h2{
  color:var(--text);
  margin-bottom:1.5rem;
}

.about p{
  font-size:1.05rem;
  line-height:2;
}

/* Footer */

.site-footer{
  /*margin-top:1rem;*/
  background:#fff;
}

.site-footer p{
  color:#777;
}

/* Simple reveal animation */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Larger desktop spacing */

@media (min-width:1200px){

  .hero-grid{
    gap:6rem;
  }

  h1{
    font-size:3.5rem;
  }

}

/* Tablet */

@media (max-width:900px){

  .hero{
    min-height:auto;
    padding-top:3rem;
  }

  .hero-copy{
    width:100%;
  }

  .hero-buttons{
    width:100%;
    justify-content:flex-start;
    margin-bottom:2.5rem;
  }

  .about{
    width:100%;
    padding-top:2.5rem;
  }

}

/* Mobile */

@media (max-width:640px){

  .hero{
    padding-top:2rem;
  }

  h1{
    font-size:3rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .button{
    width:100%;
  }

  .hero-image img{
    width:min(100%,420px);
    margin:0 auto;
  }

  .about{
    margin-top:1rem;
  }

}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:145px;
  transition:
    background-color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.site-header.scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

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

.desktop-nav a{
  padding:.25rem 0;
}

.desktop-nav a:hover{
  color:var(--accent-dark);
}

.mobile-nav{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}

.mobile-nav.active{
  display:block;
  max-height:260px;
}

/* ---------- Portrait ---------- */

.hero-image{
  justify-content:flex-start;
}

.hero-image img{
  border-radius:16px;
  object-fit:contain;
}

/* ---------- Text ---------- */

.about p,
.intro{
  max-width:65ch;
}

/* ---------- Footer ---------- */

/*.site-footer{
  padding:1rem 0;
}*/
}*/

.footer-links a:hover{
  color:var(--accent-dark);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion:no-preference){

  html{
    scroll-behavior:smooth;
  }

  .button,
  .desktop-nav a,
  .footer-links a,
  .hero-image img{
    transition:all .25s ease;
  }

}

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}

/* ---------- Utility Classes ---------- */

.hidden{
  display:none !important;
}

.text-center{
  text-align:center;
}

.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}

/* ---------- Large Screens ---------- */

@media (min-width:1440px){

  :root{
    --max-width:1320px;
  }

  .hero-grid{
    gap:7rem;
  }

  .hero-image img{
    width:600px;
  }

}

/* ---------- Tablet ---------- */

@media (max-width:900px){

  .site-header .container{
    min-height:100px;
  }

  .hero-grid{
    gap:2rem;
  }

}

/* ---------- Mobile ---------- */

@media (max-width:640px){

  .container{
    width:min(100% - 32px,var(--max-width));
  }

  .site-header .container{
    /*flex-wrap:wrap;*/
    gap:.75rem;
  }

  .logo{
    width:100%;
  }

  .logo img{
    height:52px;
  }

  /* Required mobile order:
     Logo
     Hello
     Buttons
     Portrait
     About
     Footer
  */

  .hero-copy{
    display:flex;
    flex-direction:column;
  }

  .hero-buttons{
    order:2;
  }

  .hero-image{
    order:3;
    justify-content:center;
    margin:1rem 0;
  }

  .about{
    order:4;
  }

/*  .site-footer{
    padding:3rem 0;
  }*/

}

/* ---------- Print ---------- */

@media print{

  .mobile-toggle,
  .desktop-nav,
  .mobile-nav,
  .hero-buttons{
    display:none !important;
  }

  body{
    color:#000;
    background:#fff;
  }

  a{
    text-decoration:none;
  }

}