.night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #48151d;
  color: var(--cream);
}

.night__opening {
  position: relative;
  display: flex;
  min-height: min(100svh, 940px);
  flex-direction: column;
  overflow: hidden;
  padding: max(38px, env(safe-area-inset-top)) clamp(28px, 7vw, 104px) 28px;
  background: #48151d;
}

.night__masthead,
.night__hero,
.night__folio,
.night__panel-inner {
  width: min(100%, 1450px);
  margin-right: auto;
  margin-left: auto;
}

.night__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(243, 228, 203, .26);
}

.night__chapter,
.night__place,
.night__panel-label,
.night__panel-foot,
.night__folio {
  font-family: var(--utility);
  font-weight: 500;
  text-transform: uppercase;
}

.night__chapter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(243, 228, 203, .88);
  font-size: 10px;
  letter-spacing: .18em;
}

.night__chapter > span:first-child,
.night__slash { color: var(--amber); }

.night__place {
  margin: 0;
  color: rgba(243, 228, 203, .72);
  font-size: 9px;
  letter-spacing: .14em;
}

.night__place span { padding: 0 5px; color: var(--rust); }

.night__hero {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding-top: 18px;
  padding-bottom: 16px;
}

.night__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.night__title,
.night__panel-title {
  margin: 0;
  font-family: "Fraunces", var(--display);
  font-weight: 900;
  font-variation-settings: "opsz" 144, "wght" 900, "SOFT" 75, "WONK" 1;
  text-transform: uppercase;
}

.night__title {
  font-size: clamp(58px, 5.8vw, 86px);
  letter-spacing: -.075em;
  line-height: .86;
}

.night__line-mask {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  padding: .03em .06em .1em 0;
}

.night__title-line {
  display: block;
  white-space: nowrap;
}

.night__line-mask--accent { color: #e18a55; }

.night__tagline {
  width: fit-content;
  margin: 24px 0 0 4px;
  padding-left: 15px;
  border-left: 1px solid var(--amber);
  color: rgba(243, 228, 203, .88);
  font: 400 clamp(16px, 1.5vw, 20px)/1.4 var(--display);
}

.night__record-stage {
  position: relative;
  width: min(39vw, 500px);
  aspect-ratio: 1;
  justify-self: center;
}

.night__record-reveal {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.night__record-disc {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}

.night__spark {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  color: var(--amber);
}

.night__spark--one { top: 8%; right: -3%; }
.night__spark--two { bottom: 5%; left: -4%; width: 10px; height: 10px; color: #e18a55; }

.night__folio {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(243, 228, 203, .24);
  color: rgba(243, 228, 203, .62);
  font-size: 8px;
  letter-spacing: .19em;
}

.night__folio-rule {
  width: 26px;
  height: 1px;
  background: rgba(215, 161, 108, .68);
}

.night__panel {
  position: relative;
  overflow: hidden;
  padding: 66px clamp(28px, 7vw, 104px) 34px;
  background: #bd6042;
  color: #38131a;
}

.night__panel::before {
  position: absolute;
  top: 0;
  right: clamp(28px, 7vw, 104px);
  left: clamp(28px, 7vw, 104px);
  height: 1px;
  background: rgba(243, 228, 203, .58);
  content: "";
}

.night__panel-inner { position: relative; }

.night__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(56, 19, 26, .42);
}

.night__panel-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(56, 19, 26, .84);
  font-size: 9px;
  letter-spacing: .16em;
}

.night__panel-label .night__slash { color: #f0c18a; }
.night__panel-spark { width: 18px; height: 18px; color: #f3e4cb; }

.night__panel-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(28px, 5vw, 68px) 0 clamp(32px, 5vw, 58px);
}

.night__panel-title {
  display: flex;
  align-items: baseline;
  gap: .22em;
  color: var(--cream);
  font-size: clamp(86px, 12.2vw, 174px);
  letter-spacing: -.085em;
  line-height: .82;
  white-space: nowrap;
}

.night__follow {
  display: inline-flex;
  min-height: 58px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 0 18px;
  border: 1px solid rgba(56, 19, 26, .78);
  color: #38131a;
  font: 600 10px/1 var(--utility);
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease;
}

.night__follow > span { padding: 0 7px 0 0; }

.night__follow-arrow {
  display: block;
  width: 56px;
  height: 56px;
  padding: 18px;
  border-left: 1px solid currentColor;
  transition: transform .2s ease;
}

.night__follow:hover { background: #38131a; color: var(--cream); }
.night__follow:hover .night__follow-arrow { transform: translate(2px, -2px); }
.night__follow:focus-visible { outline-color: #38131a; outline-offset: 5px; }
.night__follow:active { transform: translateY(1px); }

.night__panel-foot {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(56, 19, 26, .42);
  color: rgba(56, 19, 26, .72);
  font-size: 8px;
  letter-spacing: .19em;
}

@media (max-width: 900px) and (min-width: 701px) {
  .night__opening { min-height: 0; padding-right: 38px; padding-left: 38px; }
  .night__hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 28px; padding-bottom: 34px; }
  .night__copy { grid-row: 2; }
  .night__title { font-size: clamp(58px, 6.4vw, 72px); }
  .night__record-stage { grid-row: 1; width: min(40vw, 340px); }
  .night__panel { padding-right: 38px; padding-left: 38px; }
  .night__panel-title { font-size: clamp(82px, 12vw, 110px); }
  .night__panel-main { align-items: flex-start; flex-direction: column; gap: 24px; }
  .night__follow { width: min(100%, 340px); }
}

@media (max-width: 700px) {
  .night__opening {
    min-height: 0;
    padding: max(30px, env(safe-area-inset-top)) 22px 28px;
  }

  .night__masthead { gap: 8px; padding-bottom: 11px; }
  .night__chapter { gap: 7px; font-size: 8px; letter-spacing: .13em; }
  .night__place { font-size: 7px; letter-spacing: .1em; }
  .night__place span { padding: 0 2px; }

  .night__hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px 0 30px;
  }

  .night__record-stage {
    order: 0;
    width: min(66vw, 252px);
    align-self: center;
    margin: 0 auto;
  }

  .night__spark--one { top: 6%; right: -6%; width: 12px; height: 12px; }
  .night__spark--two { bottom: 2%; left: -7%; width: 9px; height: 9px; }

  .night__copy { order: 1; width: 100%; }

  .night__title {
    font-size: clamp(38px, 11.3vw, 48px);
    letter-spacing: -.075em;
    line-height: .9;
  }

  .night__line-mask { padding-bottom: .09em; }

  .night__tagline {
    margin-top: 17px;
    padding-left: 11px;
    font-size: 16px;
  }

  .night__folio { gap: 8px; padding-top: 10px; font-size: 7px; letter-spacing: .12em; }
  .night__folio-rule { width: 13px; }

  .night__panel { padding: 42px 23px 23px; }
  .night__panel::before { right: 23px; left: 23px; }
  .night__panel-top { padding-bottom: 12px; }
  .night__panel-label { gap: 7px; font-size: 7px; letter-spacing: .12em; }
  .night__panel-spark { width: 15px; height: 15px; }

  .night__panel-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0 35px;
  }

  .night__panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    font-size: clamp(72px, 20vw, 88px);
    line-height: .72;
  }

  .night__follow { width: 100%; min-height: 56px; padding-left: 14px; font-size: 9px; }
  .night__follow-arrow { width: 54px; height: 54px; padding: 18px; }
  .night__panel-foot { padding-top: 10px; font-size: 7px; letter-spacing: .14em; }
}

@media (max-width: 360px) {
  .night__opening { padding-right: 19px; padding-left: 19px; }
  .night__place { font-size: 6.5px; }
  .night__title { font-size: 37px; }
  .night__panel { padding-right: 19px; padding-left: 19px; }
  .night__panel::before { right: 19px; left: 19px; }
  .night__panel-title { font-size: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .night__follow,
  .night__follow-arrow { transition: none; }
}