/* ===================== CANDLE LAND STORY: STYLES =====================
   Sab kuch .cls-root ke andar scoped hai taake theme par asar na pare.
   Design values original section jaise hi hain.
======================================================================= */
.cls-root{
  --cls-paper:#F4EBE8;
  --cls-ink:#1A1522;
  --cls-ink-mute:#6A5F6B;
  --cls-ember-lo:#C97D3E;
  --cls-line:rgba(26,21,34,.16);
  --cls-display:"Fraunces",Georgia,serif;
  --cls-sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cls-gut:clamp(20px,5vw,72px);
  --cls-maxw:1440px;
  width:100%;
  overflow-x:clip;
}
.cls-root *,.cls-root *::before,.cls-root *::after{box-sizing:border-box}
.cls-root h2,.cls-root p,.cls-root dl,.cls-root dt,.cls-root dd{margin:0;padding:0}

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

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

/* kicker */
.cls-root .cls-kicker{
  font-family:var(--cls-sans);
  font-size:clamp(.66rem,.78vw,.76rem);
  letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  color:var(--cls-ember-lo)!important;
}

/* grid */
.cls-root .cls-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.cls-root .cls-no-seal .cls-grid{grid-template-columns:1fr 1fr}
.cls-root .cls-seal{display:block;width:clamp(150px,17vw,240px);height:auto;aspect-ratio:1;
  mix-blend-mode:multiply;justify-self:center}
.cls-root .cls-seal.is-missing{display:none}

/* heading */
.cls-root .cls-display,
.cls-root .cls-display *{color:var(--cls-ink)!important}
.cls-root .cls-display{
  margin-top:22px;
  font-family:var(--cls-display);font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
  font-size:clamp(2.2rem,5.6vw,4.6rem);
  line-height:.92;letter-spacing:-.022em;
  text-transform:none;
  max-width:12ch;
}
.cls-root .cls-display em{font-style:italic;font-weight:300;font-family:inherit}

/* right column */
.cls-root .cls-right{display:grid;gap:26px;justify-items:start}
.cls-root .cls-lede{
  font-family:var(--cls-sans);
  font-size:clamp(1.02rem,1.28vw,1.24rem);
  line-height:1.72;max-width:56ch;font-weight:300;
  color:rgba(26,21,34,.72)!important;
}
.cls-root .cls-vals{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--cls-line);width:100%}
.cls-root .cls-vals div{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,28px);align-items:baseline;
  padding-block:18px;border-bottom:1px solid var(--cls-line)}
.cls-root .cls-vals dt{font-family:var(--cls-display);font-size:1.06rem;font-weight:400;white-space:nowrap;
  color:var(--cls-ink)!important}
.cls-root .cls-vals dd{margin:0;font-family:var(--cls-sans);font-size:.9rem;line-height:1.6;
  color:var(--cls-ink-mute)!important}

/* stats */
.cls-root .cls-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);
  margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--cls-line);padding-top:clamp(30px,4vw,54px)}
.cls-root .cls-stats div{display:grid;gap:6px}
.cls-root .cls-stats b{font-family:var(--cls-display);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;
  font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--cls-ink)!important}
.cls-root .cls-stats span{font-family:var(--cls-sans);font-size:.8rem;letter-spacing:.06em;max-width:22ch;
  color:var(--cls-ink-mute)!important}

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

@media (max-width:1080px){
  .cls-root .cls-grid,.cls-root .cls-no-seal .cls-grid{grid-template-columns:1fr}
  .cls-root .cls-seal{justify-self:start;margin-block:8px}
}

@media (max-width:820px){
  .cls-root .cls-stats{grid-template-columns:1fr;gap:0}
  .cls-root .cls-stats div{padding-block:20px;border-bottom:1px solid var(--cls-line)}
}