/* Google Font - Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* Adobe Font - Fabiola Script */
@import url('https://use.typekit.net/gyg6cpv.css');

/* Adobe Font - Cubano */
@import url('https://use.typekit.net/izc2rfr.css');

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

/* smooth scroll that snaps to each section */
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}

body{
  font-family:'Playfair Display',Georgia,serif;
  background:#f5f5f0;
  color:#2c2e33;
  line-height:1.6;
  overflow-x:hidden;
}

main{
  max-width:100%;
  margin:0 auto;
}

/* full height sections */
.section{
  min-height:100vh;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4rem 2rem;
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* fade in when section loads */
.section .content{
  animation:fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* animations for active sections */
.section.active .quote{
  animation:slideIn 0.6s ease-out;
}

.section.active .author{
  animation:slideIn 0.8s ease-out;
}

.section.active .big-quote{
  animation:fadeIn 0.5s ease-out;
}

@keyframes slideIn{
  from{
    opacity:0;
    transform:translateX(-20px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:0.25;}
}

/* content wrapper */
.content{
  max-width:900px;
  width:100%;
  padding:0 1rem;
  position:relative;
}

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

.content.left{
  text-align:left;
  align-self:flex-start;
  padding-left:2rem;
  margin-left:1.5rem;
}

.content.right{
  text-align:right;
  align-self:flex-end;
  padding-right:2rem;
  margin-right:1.5rem;
}

/* bordered quote boxes */
.content.bordered{
  border:2px solid currentColor;
  border-radius:8px;
  padding:3.5rem 4.5rem;
  opacity:0.95;
  width:95%;
  max-width:95%;
}

/* bigger boxes */
.big-box{
  max-width:none;
  width:95%;
  padding:4rem 6rem !important;
}

/* header title */
.title{
  font-size:clamp(2rem,8vw,5.5rem);
  letter-spacing:0;
  line-height:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* "Words" */
.words-script{
  font-family:'fabiola-script',sans-serif;
  font-size:1em;
  font-weight:400;
  font-style:normal;
  text-transform:none;
  margin-right:0.2em;
  color:#f4dfe1;
}

/* "TO" */
.to{
  font-size:0.35em;
  font-family:'fabiola-capitals',sans-serif;
  vertical-align:middle;
  font-weight:200;
  font-style:normal;
  letter-spacing:0.05em;
  margin:0 0.3em;
  position:relative;
  top:-0.25em;
  color:#8b5a5f;
}

/* "LIVE BY" */
.live-by{
  font-family:'fabiola-capitals',sans-serif;
  font-size:0.95em;
  letter-spacing:0.1em;
  font-weight:400;
  font-style:normal;
  margin-left:0.2em;
  color:#fff5f0;
}

/* quote text */
.quote{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.25rem,3.5vw,2.5rem);
  line-height:1.6;
  font-weight:400;
  display:block;
  margin:0;
  margin-bottom:0.5rem;
}

/* italic style */
.quote.italic{
  font-style:italic;
  font-weight:400;
  line-height:1.7;
  letter-spacing:0.02em;
}

/* bold style */
.quote.bold{
  font-weight:700;
  font-style:normal;
  line-height:1.5;
}

/* light weight for longer quotes */
.quote.light{
  font-weight:300;
  font-style:normal;
  line-height:1.8;
  letter-spacing:0.01em;
}

/* uppercase style */
.quote.uppercase{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:clamp(1rem,2.5vw,1.75rem);
  font-weight:700;
  line-height:1.6;
}

/* emphasis tag */
.emphasis{
  font-style:normal;
  font-weight:700;
}

/* author names */
.author{
  font-family:'cubano',sans-serif;
  font-size:clamp(0.75rem,1.5vw,1rem);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-top:1.5rem;
  display:block;
  font-style:normal;
  font-weight:400;
}

.author.bold-author{
  font-weight:400;
}

/* italic authors */
.author.italic-author{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  text-transform:none;
  letter-spacing:normal;
}

/* big quotation marks */
.big-quote{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(4rem,10vw,8rem);
  opacity:0.25;
  line-height:0.8;
  margin-bottom:0.5rem;
  display:block;
  font-weight:400;
}

/* hanging quote effect */
.big-quote.hanging{
  position:absolute;
  left:-0.3em;
  top:0.1em;
}

/* decorative lines */
.line-decoration{
  width:60px;
  height:2px;
  background:currentColor;
  opacity:0.4;
  margin-bottom:2rem;
}

.content.center .line-decoration{
  margin-left:auto;
  margin-right:auto;
}

/* inline lines around author names */
.line-inline{
  display:inline-block;
  width:40px;
  height:2px;
  background:currentColor;
  opacity:0.6;
  vertical-align:middle;
  margin:0 1rem;
}

/* dot decorations */
.dots-ornament{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  margin-top:1.5rem;
  font-size:0.8rem;
  opacity:0.4;
}

/* bottom line ornament */
.bottom-ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
  opacity:0.4;
}

.ornament-line{
  width:40px;
  height:1px;
  background:currentColor;
}

/* diamond decoration */
.geometric-ornament{
  margin-top:1.5rem;
  font-size:1.2rem;
  opacity:0.4;
}

/* background colors for each section */
.section-header{
  background:#c89199;
  color:#f4dfe1;
  padding:2rem;
}

.section-1{
  background:#ffd4d9;
  color:#4a3236;
}

.section-2{
  background:#7db3d8;
  color:#1a3d52;
}

.section-3{
  background:#008866;
  color:#f0f5f3;
}

.section-4{
  background:#c9c4db;
  color:#2d2438;
}

.section-5{
  background:#d4d46b;
  color:#3d3d15;
}

.section-6{
  background:#c77557;
  color:#f9f5f4;
}

.section-7{
  background:#f2b3d1;
  color:#4a1c31;
}

.section-8{
  background:#6ba8cf;
  color:#0f2d3d;
}

.section-9{
  background:#a09d5c;
  color:#f2f1ed;
}

.section-10{
  background:#f4d03f;
  color:#4a4212;
}

/* footer */
.section-footer{
  background:#c89199;
  color:#f4dfe1;
  min-height:180px;
  padding:3rem 2rem;
}

.footer-content{
  opacity:0.75;
}

.footer-text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:0.85rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-weight:400;
}

.footer-line{
  width:50px;
  height:2px;
  background:currentColor;
  margin:1.5rem auto 0;
  opacity:0.6;
}

/* tablet and up */
@media (min-width:768px){
  .section{padding:5rem 2rem;}
  .content.bordered{padding:4rem 5rem;}
  .content.left{
    padding-left:2.5rem;
    margin-left:2rem;
  }
  .content.right{
    padding-right:2.5rem;
    margin-right:2rem;
  }
  .quote{line-height:1.7;}
}

/* desktop */
@media (min-width:1024px){
  .section{padding:6rem 3rem;}
  .content{max-width:800px;}
}

blockquote{quotes:none;}

cite{font-style:normal;}