/*
Theme Name: F IN THE CHAT (FINAL PASS)
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;600&display=swap');

:root{
  --red:#ff2a2a;
  --white:#f1f1f1;
}

body{
  margin:0;
  background:#000;
  color:var(--white);
  font-family:'Inter',sans-serif;
}

/* spine */
body::after{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(255,42,42,0.35);
  transform:translateX(-50%);
  z-index:10;
}

/* hero */
.hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.big-letter{
  position:absolute;
  left:10%;
  top:20%;
  font-size:30vw;
  opacity:0.02;
  font-weight:900;
}

.hero h1{
  font-family:'Playfair Display',serif;
  font-size:3rem;
  letter-spacing:6px;
  font-weight:400;
}

/* left stacked title */
.feature-title{
  position:absolute;
  left:42%;
  transform:translateX(-100%);
  top:60%;
  width:14ch;
  font-size:1.8rem;
  line-height:1.2;
  font-weight:600;
  text-align:left;
}

/* right statement */
.statement{
  position:absolute;
  right:8%;
  top:55%;
  text-align:right;
}

.statement div{
  font-family:'Playfair Display',serif;
  font-size:3.2rem;
  line-height:1.5;
  letter-spacing:3px;
}

/* grid */
.grid{
  margin-top:120vh;
  padding:3rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.card{
  background:#080808;
  padding:1rem;
  border:1px solid #111;
}