/* main.css — design tokens, reset, base typography.
   Every page loads this file first. If you rebrand a color or font,
   this is the only place you should ever need to change it. */

:root{
  --ink:#131009;
  --ink-soft:#1c1710;
  --charcoal:#241d14;
  --cream:#f2e7cf;
  --cream-dim:#cbb98f;
  --brass:#c99a46;
  --brass-bright:#e3b862;
  --ember:#a8432a;
  --line: rgba(201,154,70,0.35);
  --radius: 2px;
  --max: 1120px;
}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Fraunces', Georgia, serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:700;
  color:var(--cream);
  margin:0;
}

a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

:focus-visible{outline:2px solid var(--brass-bright); outline-offset:2px;}

/* =========================================
   BEFORE & AFTER GALLERY
========================================= */

.ba-carousel {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 40px;
}

.ba-track-container {
  flex: 1;
  overflow: hidden;
}

.ba-track {
  display: flex;
  transition: transform 0.45s ease;
}

.ba-slide {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 0 10px;
}


/* BEFORE / AFTER PHOTO PAIR */

.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.photo-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}

.photo-ph img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* BEFORE / AFTER LABEL */

.photo-ph span {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;

  padding: 5px 9px;

  background: rgba(0, 0, 0, 0.8);
  color: #f2e6d0;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  border-radius: 3px;
}


/* CAPTION */

.ba-caption {
  margin: 14px 0 0;

  text-align: center;

  color: #c8922e;

  font-size: 14px;
  font-weight: 600;
}


/* ARROWS */

.ba-arrow {
  flex-shrink: 0;

  width: 44px;
  height: 44px;

  border: 1px solid #c8922e;
  border-radius: 50%;

  background: #c8922e;
  color: #050505;

  font-size: 20px;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.2s ease;
}

.ba-arrow:hover {
  background: #f2e6d0;
  transform: scale(1.05);
}


/* TABLET */

@media (max-width: 900px) {

  .ba-slide {
    flex: 0 0 100%;
  }

}


/* PHONE */

@media (max-width: 600px) {

  .ba-carousel {
    gap: 8px;
  }

  .ba-slide {
    padding: 0 4px;
  }

  .ba-pair {
    gap: 5px;
  }

  .ba-arrow {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

}