/* ===================== CANDLE LAND RITUAL: STYLES =====================
   Sab kuch .clr-root ke andar scoped hai taake theme par asar na pare.
   Design values original section jaise hi hain.
======================================================================= */
.clr-root{
  --clr-void:#07060C;
  --clr-wax:#C88FA1;
  --clr-ember:#FFB463;
  --clr-paper:#F4EBE8;
  --clr-line:rgba(244,235,232,.14);
  --clr-display:"Fraunces",Georgia,serif;
  --clr-sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --clr-gut:clamp(20px,5vw,72px);
  --clr-maxw:1440px;
  --clr-ease:cubic-bezier(.22,1,.36,1);
  width:100%;
  overflow-x:clip;
}
.clr-root *,.clr-root *::before,.clr-root *::after{box-sizing:border-box}
.clr-root h2,.clr-root h3,.clr-root p,.clr-root ol,.clr-root li{margin:0;padding:0}
.clr-root ol,.clr-root li{list-style:none}
.clr-root li::before,.clr-root li::marker{content:none}
.clr-root img{max-width:none;display:block;border:0;box-shadow:none}

/* section */
.clr-root .clr-ritual{
  position:relative;overflow:hidden;
  background:var(--clr-void);color:var(--clr-paper);
  padding-block:clamp(90px,14vw,200px);
  font-family:var(--clr-sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.clr-root .clr-wrap{max-width:var(--clr-maxw);margin-inline:auto;padding-inline:var(--clr-gut)}

/* background: 120% height, -10% se shuru, taake parallax mein upar/neeche khaali patti na aaye */
.clr-root .clr-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.clr-root .clr-bg img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;
  opacity:.2;filter:blur(6px) saturate(1.15);will-change:transform}
.clr-root .clr-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--clr-void) 6%,rgba(7,6,12,.5) 52%,var(--clr-void) 100%)}

.clr-root .clr-in{position:relative;z-index:1;display:grid;gap:clamp(40px,6vw,80px)}

/* reveal */
.clr-root .clr-rv{display:block;overflow:hidden;padding-bottom:.06em}
.clr-root .clr-rv > span{display:block;will-change:transform}

/* head */
.clr-root .clr-kicker{
  font-size:clamp(.66rem,.78vw,.76rem);letter-spacing:.24em;text-transform:uppercase;font-weight:400;line-height:1.6;
  color:var(--clr-wax)!important;
}
.clr-root .clr-display,
.clr-root .clr-display *{color:var(--clr-paper)!important}
.clr-root .clr-display{
  margin-top:20px;
  font-family:var(--clr-display);font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:.92;letter-spacing:-.022em;
  text-transform:none;max-width:13ch;
}
.clr-root .clr-display em{font-style:italic;font-weight:300;font-family:inherit}

/* list */
.clr-root .clr-list{display:grid;gap:0;border-top:1px solid var(--clr-line)}
.clr-root .clr-list li{position:relative;display:grid;
  grid-template-columns:clamp(58px,7vw,110px) minmax(0,1.1fr) minmax(0,1.4fr);
  gap:clamp(16px,3vw,44px);align-items:start;
  padding-block:clamp(22px,3vw,38px);border-bottom:1px solid var(--clr-line);
  transition:padding-left .6s var(--clr-ease)}
.clr-root .clr-list li:hover{padding-left:clamp(6px,1.2vw,18px)}
.clr-root .clr-n{font-family:var(--clr-display);font-size:clamp(1.4rem,2.4vw,2.1rem);
  font-weight:300;line-height:1;font-variant-numeric:tabular-nums;color:var(--clr-wax)!important}
.clr-root .clr-list h3{font-family:var(--clr-display);font-weight:400;font-size:clamp(1.25rem,2.4vw,2.05rem);
  font-variation-settings:"SOFT" 50,"WONK" 1;line-height:1.15;letter-spacing:-.015em;text-transform:none;
  color:var(--clr-paper)!important}
.clr-root .clr-list p{font-family:var(--clr-sans);font-size:.94rem;line-height:1.72;max-width:52ch;
  color:rgba(244,235,232,.62)!important}

@media (prefers-reduced-motion:reduce){
  .clr-root *,.clr-root *::before,.clr-root *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:1080px){
  .clr-root .clr-list li{grid-template-columns:clamp(44px,8vw,70px) 1fr}
  .clr-root .clr-list p{grid-column:2/-1}
}

/* touch par hover wala khisakna band */
@media (hover:none){
  .clr-root .clr-list li:hover{padding-left:0}
}