/* page background field, sampled from the reference */
body{ background:#010101 url("img2/about-bg.png") top center / 100% 541.4rem no-repeat; }

/* =========================================================
   ABOUT — 1980 x 5414
   sections: hero 0-1020 | what 1020-1600 | prog 1600-2760
             first 2760-3400 | more 3400-3856 | sub 3856-4700
             outro 4700-4990 | footer 4990-5414
   ========================================================= */

/* ---------------------------------------------------------
   1. HERO   0 – 1020
   --------------------------------------------------------- */

.hero{ height:102rem; overflow:hidden; }

.hero__bg{
  position:absolute; inset:0;
  background:url("img2/about-hero.png") center top / 198rem 102rem no-repeat;
}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,9,0) 78%, rgba(10,10,9,.55) 92%, var(--bg) 100%);
}

.hero__eyebrow{
  position:absolute; left:4rem; top:42.29rem;
  font-size:1.05rem; font-weight:500; letter-spacing:.2em; line-height:1;
  color:var(--gold);
  z-index:3;
}
.hero__title{
  position:absolute; left:4.1rem; top:45.68rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:12.37rem; line-height:12rem; letter-spacing:-.0025em; word-spacing:-.029em;
  color:#efebe3;
  z-index:3;
}
.hero__lead{
  position:absolute; left:4.1rem; top:74.07rem;
  font-size:2.43rem; font-weight:300; line-height:1;
  color:var(--cream);
  z-index:3;
}
.hero__para{
  position:absolute; left:4rem; top:77.83rem;
  font-size:1.618rem; font-weight:300; line-height:2.3rem;
  color:#8d8b86;
  z-index:3;
}
.hero__meta{
  position:absolute; left:153.2rem; top:74.78rem;
  font-size:1.5rem; font-weight:500; letter-spacing:.2em; line-height:1;
  color:var(--gold);
  z-index:3;
}
.hero__cta1{
  position:absolute; left:153rem; top:78.3rem;
  width:22.8rem; height:4.2rem;
  z-index:3;
}
.hero__cta2{
  position:absolute; left:177rem; top:78.3rem;
  width:17rem; height:4.2rem;
  z-index:3;
}
.hero__scroll{
  position:absolute; left:186.5rem; top:49.2rem;
  font-size:1.1rem; letter-spacing:.28em; font-weight:400;
  color:rgba(239,235,227,.30);
  z-index:3;
}
.hero__scroll::before{
  content:""; position:absolute; left:50%; top:-3.4rem;
  width:1px; height:2.6rem; background:rgba(239,235,227,.22);
}

/* ---------------------------------------------------------
   2. WHAT WE ARE   1020 – 1600
   --------------------------------------------------------- */

.s-what{ height:58rem; }
.s-what__lbl{ left:4.1rem; top:2.29rem; font-size:1.43rem; letter-spacing:.125em; }

.s-what__img{ position:absolute; }
.s-what__img--l{ left:4.8rem; top:11.1rem;  width:49.2rem; height:34.2rem; }
.s-what__img--r{
  left:156rem; top:11.1rem; width:37.9rem; height:42.4rem;
  background:url("img2/Group%208.png") -1.8rem -3rem / 40.7rem 45.5rem no-repeat;
}

.s-what__h2{
  position:absolute; left:69.5rem; top:6.01rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 88,"SOFT" 0,"WONK" 1;
  font-size:6.815rem; line-height:1; letter-spacing:0;
  color:var(--cream);
}
.s-what__sub{
  position:absolute; left:69.4rem; top:17.99rem;
  font-size:2.45rem; font-weight:300; line-height:1;
  color:#888681;
}
.s-what__p1{
  position:absolute; left:69.4rem; top:21.5rem;
  font-size:1.622rem; font-weight:300; line-height:2.8rem;
  color:#888681;
}
.s-what__p2{
  position:absolute; left:69.4rem; top:30.7rem;
  font-size:1.622rem; font-weight:300; line-height:2.8rem;
  color:#888681;
}

/* ---------------------------------------------------------
   3. PROGRAMME   1600 – 2760
   --------------------------------------------------------- */

.s-prog{ height:116rem; }
.s-prog__lbl{ left:4.1rem; top:2.95rem; font-size:1rem; letter-spacing:.2em; }

.s-prog__h2{
  position:absolute; left:4.1rem; top:6.29rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:8.44rem; line-height:7.9rem; letter-spacing:-.004em;
  color:var(--cream);
}
.s-prog__img{
  position:absolute; left:134.5rem; top:28.4rem;
  width:63.5rem; height:55.6rem;
  background:url("img2/portrait-fitness-influencer%201.png") -.6rem -2.7rem / 64.2rem 79.1rem no-repeat;
}

.prog{ position:absolute; left:0; top:0; width:100%; }
.prog__row{
  position:absolute; left:4.1rem; width:124.4rem;
  border-top:1px solid rgba(239,235,227,.075);
}
.prog__row--1{ top:29.2rem; height:13.9rem; }
.prog__row--2{ top:43.1rem; height:14.6rem; }
.prog__row--3{ top:57.7rem; height:14.6rem; }
.prog__row--4{ top:72.3rem; height:14.6rem; }
.prog__row--5{ top:86.9rem; height:14.6rem; border-bottom:1px solid rgba(239,235,227,.075); }

.prog__n{
  position:absolute; left:0; top:5.25rem;
  font-style:normal;
  font-size:1.05rem; font-weight:400; letter-spacing:.08em; line-height:1;
  color:rgba(239,235,227,.17);
}
.prog__name{
  position:absolute; left:5.32rem; top:4.15rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 1;
  font-size:3.64rem; line-height:1;
  color:var(--cream);
}
.prog__desc{
  position:absolute; left:47.5rem; top:4.7rem;
  font-size:1.63rem; font-weight:300; line-height:2.5rem;
  color:#888681;
}
.prog__row--1 .prog__desc{ top:4rem; left:46.8rem; }
.prog__row--2 .prog__desc{ left:47.4rem; }
.prog__row--3 .prog__desc{ left:47.5rem; }
.prog__row--4 .prog__desc{ left:48.1rem; }
.prog__row--5 .prog__desc{ left:48.1rem; }

/* ---------------------------------------------------------
   4. FIRST EDITION   2760 – 3400
   --------------------------------------------------------- */

.s-first{ height:64rem; }

.s-first__h2{
  position:absolute; left:4.2rem; top:5.04rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 88,"SOFT" 0,"WONK" 1;
  font-size:7.8rem; line-height:1; letter-spacing:0;
  color:var(--cream);
  z-index:2;
}
.s-first__p1{
  position:absolute; left:4.1rem; top:16.78rem;
  font-size:1.63rem; font-weight:300; line-height:2.8rem;
  color:#888681;
  z-index:2;
}
.s-first__p2{
  position:absolute; left:4.1rem; top:24.28rem;
  font-size:1.618rem; font-weight:300; line-height:2.8rem;
  color:#888681;
  z-index:2;
}

.s-first__panel{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
.s-first__rule{
  position:absolute; left:85.3rem; right:4.1rem; height:1px;
  background:rgba(239,235,227,.09);
}
.s-first__rule--1{ top:4.8rem; }
.s-first__rule--2{ top:19.5rem; }
.s-first__k{
  position:absolute; left:85.4rem;
  font-size:.92rem; font-weight:400; letter-spacing:.19em; line-height:1;
  color:rgba(239,235,227,.30);
}
.s-first__k--1{ top:9.07rem; }
.s-first__k--2{ top:22.94rem; }
.s-first__v{
  position:absolute; left:85.4rem;
  font-size:2rem; font-weight:300; line-height:1;
  color:var(--cream);
}
.s-first__v--1{ top:14.33rem; }
.s-first__v--2{ top:28.23rem; }
.s-first__btn{
  position:absolute; left:85.3rem; top:33.4rem;
  width:17.9rem; height:4.1rem;
}

/* ---------------------------------------------------------
   5. MORE THAN A FESTIVAL   3400 – 3856
   --------------------------------------------------------- */

.s-more{ height:45.6rem; }
.s-more__h2{
  position:absolute; left:36.7rem; top:10.5rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:700;
  font-size:8.36rem; line-height:8rem; letter-spacing:0;
  color:var(--cream);
  z-index:2;
}
.s-more__h2 span{ margin-left:.5rem; }

.s-more__p1{
  position:absolute; left:97.3rem; top:10.36rem;
  font-size:1.518rem; font-weight:300; line-height:2.7rem;
  color:#8d8b86;
  z-index:2;
}
.s-more__p2{
  position:absolute; left:97.3rem; top:20.76rem;
  font-size:1.518rem; font-weight:300; line-height:2.7rem;
  color:#8d8b86;
  z-index:2;
}
.s-more__btn{
  position:absolute; left:97.3rem; top:31.9rem;
  width:25.9rem; height:4.3rem;
  z-index:2;
}

/* ---------------------------------------------------------
   6. SUBMISSIONS   3856 – 4700
   --------------------------------------------------------- */

.s-sub{ height:84.4rem; }
.s-sub__panel{
  position:absolute; left:20.4rem; top:0; width:155.9rem; height:63.2rem;
}
.s-sub__panel::before{
  content:""; position:absolute; left:0; top:.2rem; width:100%; height:63.2rem;
  background:url("img2/Mask%20group%20(2).png") 0 0 / 100% 100% no-repeat;
}

.s-sub__lbl{ left:16.4rem; top:17.15rem; font-size:1rem; letter-spacing:.2em; }

.s-sub__h2{
  position:absolute; left:16.4rem; top:20.86rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:7.044rem; line-height:6.5rem; letter-spacing:0;
  color:var(--cream);
}
.s-sub__h2c{
  position:absolute; left:16.5rem; top:33.94rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-size:6.6rem; line-height:1;
  color:var(--cream);
}
.s-sub__p1{
  position:absolute; left:76.9rem; top:19.9rem;
  font-size:1.619rem; font-weight:300; line-height:2.8rem;
  color:var(--cream);
}
.s-sub__p2{
  position:absolute; left:76.9rem; top:27.4rem;
  font-size:1.619rem; font-weight:300; line-height:2.8rem;
  color:var(--cream);
}
.s-sub__note{
  position:absolute; left:76.9rem; top:35.06rem;
  font-size:1.419rem; font-weight:300; line-height:1;
  color:rgba(239,235,227,.40);
}
.s-sub__btn{
  position:absolute; left:76.9rem; top:42.4rem;
  width:22.5rem; height:4.1rem;
}

/* ---------------------------------------------------------
   7. OUTRO   4700 – 4990
   --------------------------------------------------------- */

.s-outro{ height:29rem; }
.s-outro__eyebrow{
  position:absolute; left:4rem; top:9.43rem;
  font-size:1.178rem; font-weight:400; letter-spacing:.2em; line-height:1;
  color:rgba(239,235,227,.53);
}
.s-outro__h{
  position:absolute; left:4rem; top:12.78rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 88,"SOFT" 0,"WONK" 1;
  font-size:5.5rem; line-height:1;
  color:rgba(239,235,227,.72);
}
.s-outro__mark{
  position:absolute; left:186.4rem; top:13.34rem;
  font-size:1.017rem; font-weight:400; letter-spacing:.2em; line-height:1;
  color:rgba(239,235,227,.22);
}