@font-face {
  font-family:"Oddity Expanded Bold";
  src:url(../fonts/Oddity-ExpandedBold.ttf) format("truetype");
  font-weight:normal;
  font-display:swap;
}

@font-face {
  font-family:"Oddity Expanded Medium";
  src:url(../fonts/Oddity-ExpandedMedium.ttf) format("truetype");
  font-weight:normal;
  font-display:swap;
}

@font-face {
  font-family:"Campton Medium";
  src:url(../fonts/CamptonMedium.otf) format("opentype");
  font-weight:normal;
  font-display:swap;
}

:root {
  --navy:#070a1c;
  --orange:#ff5f01;
  --cyan:#0ed1fc;
  --cream:#efe9dc;
  --muted:#9aa6c8;
  --line:rgba(127,224,255,.18);
  --dim:#4d5875;
  --lockbg:#080b1e;
  --lockline:#222b45;
  --disp:"Oddity Expanded Bold",sans-serif;
  --margin:"Oddity Expanded Medium",sans-serif;
  --body:"Campton Medium",sans-serif;
}

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

html {
  scroll-behavior:smooth;
}

body {
  background:var(--navy);
  color:var(--cream);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

img {
  max-width:100%;
}

.wrap {
  max-width:1060px;
  margin:0 auto;
  padding:0 28px;
}

.kicker {
  font-family:var(--disp);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

h2 {
  font-family:var(--disp);
  font-size:28px;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:6px;
  line-height:1.1;
}

h2 .o {
  color:var(--orange);
}

p {
  font-size:16px;
  color:#d7ddf0;
}

.small {
  font-size:13.5px;
  color:var(--muted);
}

section {
  padding:74px 0;
  border-top:1px solid var(--line);
}

/* nav */
  nav {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
}

nav .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
}

nav .brand img {
  height:18px;
  width:auto;
  display:block;
  transition:opacity .2s ease;
}

nav .brand .mark {
  display:none;
  height:34px;
}

nav .brand:hover img {
  opacity:.75;
}

nav .rt {
  font-family:var(--margin);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s ease;
}

nav .rt:hover {
  color:var(--cyan);
}

/* hero */
  .hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  text-align:center;
}

.hero video.bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero .scrim {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 55%,rgba(7,10,28,.72) 0%,rgba(7,10,28,.9) 55%,rgba(7,10,28,.97) 100%);
}

.hero .wrap {
  position:relative;
  width:100%;
  padding-top:90px;
  padding-bottom:70px;
}

.hero img.logo {
  width:600px;
  max-width:88%;
  margin:14px auto 26px;
  display:block;
}

/* countdown */
  .cd {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}

.cd .u {
  min-width:132px;
  border:1px solid var(--line);
  background:rgba(11,16,41,.55);
  border-radius:8px;
  padding:20px 10px 15px;
}

.cd .n {
  font-family:var(--disp);
  font-size:60px;
  line-height:1;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
}

.cd .l {
  font-family:var(--margin);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:9px;
}

.cd .u:first-child .n {
  color:var(--cyan);
}

.dateline {
  font-family:var(--disp);
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-top:18px;
}

.tag {
  font-size:16px;
  color:#d7ddf0;
  max-width:560px;
  margin:16px auto 0;
}

.btnrow {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:28px;
}

.btn {
  font-family:var(--disp);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 26px;
  border-radius:3px;
  border:1px solid var(--line);
  color:var(--cyan);
  background:rgba(11,16,41,.55);
  display:inline-block;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}

.btn:hover {
  color:var(--cream);
  border-color:var(--cyan);
  transform:translateY(-2px);
  background:rgba(14,209,252,.1);
  box-shadow:0 10px 26px rgba(14,209,252,.18);
}

.btn.solid {
  background:var(--orange);
  border-color:var(--orange);
  color:#1a0d04;
}

.btn.solid:hover {
  color:#1a0d04;
  box-shadow:0 12px 28px rgba(255,95,1,.34);
}

/* chapters */
  .arcbar {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:4px 0 22px;
  font-family:var(--margin);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.dots {
  letter-spacing:3px;
  font-size:12px;
}

.dots .next {
  color:var(--orange);
}

.dots .off {
  color:#2a3352;
}

.timeline {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:12px;
}

.arc {
  background:var(--lockbg);
  border:1px solid var(--lockline);
  border-radius:9px;
  padding:16px 15px 34px;
  position:relative;
  cursor:not-allowed;
}

.arc .badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--disp);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #2a3352;
  color:#6b7699;
}

.arc .ph {
  height:82px;
  border-radius:5px;
  margin:12px 0;
  background:repeating-linear-gradient(45deg,#0b0f22,#0b0f22 3px,#0d1226 3px,#0d1226 6px);
}

.arc .ch {
  font-family:var(--margin);
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}

.arc .yr {
  font-family:var(--margin);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--dim);
  margin-top:5px;
}

.redact {
  display:inline-block;
  background:#2a3352;
  color:transparent;
  border-radius:2px;
  user-select:none;
}

.arc .bar {
  height:10px;
  background:#2a3352;
  border-radius:2px;
  margin:9px 0 10px;
}

.arc .bar.s {
  height:7px;
  background:#1b2340;
  margin:0 0 5px;
}

.arc .hint {
  position:absolute;
  left:15px;
  right:15px;
  bottom:14px;
  font-family:var(--margin);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.arc:hover .hint {
  opacity:1;
}

.arc:nth-of-type(2) {
  opacity:.72;
}

.arc:nth-of-type(3) {
  opacity:.62;
}

.arc:nth-of-type(4) {
  opacity:.52;
}

.arc:nth-of-type(5) {
  opacity:.44;
}

.arc:hover {
  opacity:.94;
  border-color:#33406b;
}

.arc:hover .bar,.arc:hover .redact {
  animation:flick .5s steps(2) infinite;
}

@keyframes flick {
  0%,100% {
    opacity:1;
  }

  50% {
    opacity:.45;
  }

}

/* first chapter, about to open */
  .arc.next {
  border-color:var(--orange);
  opacity:1;
  cursor:default;
  box-shadow:0 0 0 1px rgba(255,95,1,.22),0 0 26px rgba(255,95,1,.1);
}

.arc.next .badge {
  background:var(--orange);
  border-color:var(--orange);
  color:#1a0d04;
}

.arc.next .ph {
  background:#0a0f24;
  overflow:hidden;
}

.arc.next .yr {
  font-family:var(--disp);
  letter-spacing:.1em;
  color:var(--cyan);
}

.arc.next .nm {
  font-family:var(--disp);
  font-size:16px;
  text-transform:uppercase;
  color:var(--cream);
  margin:6px 0 7px;
  line-height:1.1;
}

.arc.next .ds {
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
}

.arc.next .hint {
  opacity:1;
  color:var(--orange);
}

/* discord */
  .disc {
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(14,209,252,.07),rgba(11,16,41,.55));
  padding:46px 42px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:34px;
  align-items:center;
}

.disc .ic {
  width:88px;
  height:88px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(7,10,28,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
  flex:none;
}

.disc .ic svg {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  fill: currentColor;
  display: block;
}

.disc h2 {
  font-size:36px;
  margin-bottom:10px;
}

.disc p {
  max-width:560px;
}

.disc .perks {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:16px;
}

.disc .perk {
  font-family:var(--margin);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px;
}

.disc .perk::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  flex:none;
}

.disc .go {
  flex:none;
}

.disc .btn {
  font-size:14px;
  padding:18px 30px;
}

/* notify */
  .social {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.social a {
  min-height: 64px;
  padding: 14px 18px;
  gap: 12px;
  background: rgba(14, 209, 252, .04);
  font-family: var(--margin);
  font-size: 13px;
  border:1px solid var(--line);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream);
  transition:.2s;
}

.social a:hover {
  border-color:var(--cyan);
  color:var(--cyan);
  background:rgba(14,209,252,.1);
  transform:translateY(-2px);
}

.social svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill:currentColor;
  display:block;
}

.cline {
  margin-top:18px;
}

.cline .lab {
  font-family:var(--disp);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}

.cline .val {
  font-size:16px;
}

.cline a:hover {
  color:var(--cyan);
}

footer {
  padding:32px 0;
  border-top:1px solid var(--line);
}

footer .wrap {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

footer .sig {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--margin);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

footer .sig img {
  height:34px;
  width:auto;
  display:block;
  opacity:.6;
}

footer .fl {
  font-family:var(--margin);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none !important;
    animation:none !important;
  }

}

@media(max-width:900px) {
  .timeline {
    grid-template-columns:1fr 1fr 1fr;
  }

  .disc {
    grid-template-columns:auto 1fr;
    gap:24px;
    padding:34px 28px;
  }

  .disc .go {
    grid-column:1 / -1;
  }

  .disc h2 {
    font-size:28px;
  }

}

@media(max-width:760px) {
  .wrap {
    padding:0 20px;
  }

  section {
    padding:52px 0;
  }

  .hero img.logo {
    width:100%;
  }

  .cd {
    gap:8px;
  }

  .cd .u {
    min-width:0;
    flex:1 1 40%;
    padding:15px 6px 12px;
  }

  .cd .n {
    font-size:40px;
  }

  .timeline {
    grid-template-columns:1fr 1fr;
  }

  .disc {
    grid-template-columns:1fr;
    text-align:left;
    padding:28px 22px;
  }

  .disc .ic {
    width:64px;
    height:64px;
    border-radius:16px;
  }

  .disc .ic svg {
    width:34px;
    height:34px;
  }

  .btnrow .btn {
    flex:1 1 auto;
    text-align:center;
  }

  nav .brand .logotype {
    display:none;
  }

  nav .brand .mark {
    display:block;
  }

}

/* artist */
  .artist {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:36px;
  align-items:start;
}

.avatarbox {
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#05060f;
  aspect-ratio:1/1;
}

.avatarbox video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.pressrow {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:24px;
}

.pressrow .shot {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .25s ease;
  background:#0a0f24;
}

.pressrow .shot img {
  display:block;
  width:100%;
  height:auto;
}

.pressrow .shot:hover {
  border-color:rgba(14,209,252,.55);
}

.pressrow .shot:hover .zoomable {
  transform:scale(1.03);
  filter:brightness(1.06);
}

.sec-head {
  margin-bottom:24px;
}

.stack {
  display:grid;
  gap:18px;
}

.caption {
  font-size:13px;
  color:var(--muted);
  margin-top:12px;
}

[hidden] {
  display:none!important;
}

.presave-pending {
  align-self:center;
  font-family:var(--margin);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding:15px 10px;
}

.cover-zoom {
  display:block;
  width:100%;
  margin:12px 0;
  border:0;
  border-radius:5px;
  overflow:hidden;
  background:#0a0f24;
  cursor:zoom-in;
  position:relative;
  color:var(--cream);
}

.cover-zoom img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  transition:transform .3s;
}

.cover-zoom:hover img {
  transform:scale(1.04);
}


.zoomable {
  cursor:zoom-in;
  transition:transform .3s;
}

.lightbox {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  border:0;
  background:rgba(6,9,24,.94);
  padding:28px;
  color:var(--cream);
}

.lightbox[open] {
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox::backdrop {
  background:rgba(6,9,24,.94);
}

.lightbox img {
  max-width:92vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:6px;
}

.lb-close {
  position:absolute;
  top:16px;
  right:22px;
  background:none;
  border:none;
  color:var(--cream);
  font-size:36px;
  cursor:pointer;
}

:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px;
}

@media(max-width:760px) {
  .artist {
    grid-template-columns:1fr;
  }

  .avatarbox {
    max-width:420px;
    width:100%;
  }

  .lightbox {
    padding:12px;
  }

}

.chapters-intro {
  max-width:800px;
}

.chapters-progress {
  margin-top:22px;
}

.placeholder-80 {
  width:80%
}

.placeholder-100 {
  width:100%
}

.placeholder-62 {
  width:62%
}

.placeholder-66 {
  width:66%
}

.placeholder-94 {
  width:94%
}

.placeholder-50 {
  width:50%
}

.placeholder-74 {
  width:74%
}

.placeholder-88 {
  width:88%
}

.placeholder-57 {
  width:57%
}

.placeholder-58 {
  width:58%
}

.placeholder-84 {
  width:84%
}

.placeholder-44 {
  width:44%
}

.artist-note {
  margin-top: 10px;
  padding: 18px 20px;
  border-left: 2px solid var(--orange);
  background: rgba(255, 95, 1, .035);
  border-radius: 0 6px 6px 0;
}
.artist-note .artist-note-label {
  margin: 0 0 10px;
  color: var(--orange);
  font-family: var(--margin);
  font-size: 10px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.artist-note p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.contact-details {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.premiere-reminder {
  margin-top: 22px;
  font-size: 14px;
}
.premiere-reminder a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.premiere-reminder a:hover {
  color: var(--cream);
}

.social-section {
  flex-basis: 100%;
}
@media (max-width: 600px) {
  .social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social a {
    padding: 14px 10px;
    font-size: 12px;
  }
}