/* =========================================================
   THE DESCENT — SHARED PAGE STYLING
   v 2026 0905 1106
   ========================================================= */

:root {
  --descent-gold: #d2aa5d;
  --descent-gold-soft: rgba(210,170,93,.44);
  --descent-ink: #03080b;
  --descent-panel: rgba(5,11,14,.82);
  --descent-text: #eee7dc;
  --descent-muted: #bfb6a9;
}

* { box-sizing: border-box; }

body.descent-page {
  margin: 0;
  color: var(--descent-text);
  background:
    radial-gradient(circle at 50% 8%, rgba(210,170,93,.055), transparent 27%),
    radial-gradient(circle at 13% 42%, rgba(79,96,102,.06), transparent 28%),
    linear-gradient(180deg, #050b0e 0%, #020608 54%, #03080b 100%);
}

body.descent-page main {
  overflow: hidden;
}

body.descent-page .section {
  padding-left: clamp(24px, 6vw, 92px);
  padding-right: clamp(24px, 6vw, 92px);
}

body.descent-page .section-kicker {
  margin: 0 0 10px;
  color: var(--descent-gold);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.descent-page .section-title,
.world-card-copy h2 {
  margin: 0;
  color: #f0e7d8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: .01em;
}

body.descent-page .section-title { font-size: clamp(34px, 4.2vw, 54px); }
.world-card-copy h2 { font-size: clamp(36px, 4.2vw, 56px); }

body.descent-page .gold-rule {
  width: 110px;
  height: 1px;
  margin: 19px 0 27px;
  background: linear-gradient(90deg, var(--descent-gold), rgba(210,170,93,0));
}

body.descent-page .centered-rule {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(210,170,93,0), var(--descent-gold), rgba(210,170,93,0));
}

/* HERO */
.descent-hero {
  min-height: 470px;
  display: grid;
  place-items: center;
  position: relative;
  padding: clamp(96px, 11vw, 150px) clamp(24px, 8vw, 130px) clamp(78px, 9vw, 122px);
  text-align: center;
  border-bottom: 1px solid rgba(210,170,93,.18);
  background:
    radial-gradient(circle at 50% 30%, rgba(210,170,93,.08), transparent 27%),
    radial-gradient(circle at 50% 70%, rgba(12,28,34,.55), transparent 55%),
    linear-gradient(180deg, rgba(1,5,7,.76), rgba(2,8,11,.94));
}

.descent-hero::before,
.descent-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.descent-hero::before {
  width: min(760px, 72vw);
  aspect-ratio: 1;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(210,170,93,.07);
  border-radius: 50%;
  box-shadow:
    0 0 0 54px rgba(210,170,93,.018),
    0 0 0 112px rgba(210,170,93,.012);
}

.descent-hero::after {
  inset: 0;
  opacity: .35;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(210,170,93,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 18%, rgba(210,170,93,.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 64%, rgba(210,170,93,.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 73%, rgba(210,170,93,.45) 0 1px, transparent 1.5px);
}

.descent-hero-copy {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
}

.descent-hero h1 {
  margin: 0;
  color: #f2e8d6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .015em;
  text-shadow: 0 0 32px rgba(210,170,93,.08);
}

.descent-hero-copy > p:not(.section-kicker) {
  max-width: 900px;
  margin: 24px auto 0;
  color: #c9c0b4;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.66;
}

.descent-ornament {
  width: min(470px, 72vw);
  margin: 25px auto 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 13px;
  color: var(--descent-gold);
}

.descent-ornament span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,170,93,.72));
}
.descent-ornament span:last-child { transform: scaleX(-1); }
.descent-ornament b { font-weight: 400; font-size: 15px; }

/* CARD + DESCRIPTION */
.world-card-area {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
  padding-top: clamp(76px, 8vw, 112px);
  padding-bottom: clamp(80px, 9vw, 122px);
}

.world-card-visual {
  display: flex;
  justify-content: center;
}

.card-frame {
  position: relative;
  width: min(420px, 100%);
  padding: 10px;
  border: 1px solid rgba(210,170,93,.5);
  background: rgba(5,10,12,.68);
  box-shadow:
    0 28px 80px rgba(0,0,0,.45),
    0 0 38px rgba(210,170,93,.05);
}

.card-frame::before,
.card-frame::after {
  content: "✦";
  position: absolute;
  z-index: 2;
  color: var(--descent-gold);
  background: #050a0d;
  padding: 2px 7px;
  font-size: 12px;
}
.card-frame::before { left: 50%; top: -10px; transform: translateX(-50%); }
.card-frame::after { left: 50%; bottom: -10px; transform: translateX(-50%); }

.card-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(210,170,93,.22);
}

.world-card-copy {
  max-width: 720px;
}

.world-card-copy p:not(.section-kicker) {
  margin: 0;
  color: var(--descent-muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.76;
}
.world-card-copy p + p { margin-top: 20px; }

/* VIDEO */
.world-video-section {
  padding-top: clamp(72px, 8vw, 104px);
  padding-bottom: clamp(78px, 8vw, 112px);
  border-top: 1px solid rgba(210,170,93,.12);
  border-bottom: 1px solid rgba(210,170,93,.12);
  background:
    radial-gradient(circle at 50% 36%, rgba(210,170,93,.055), transparent 34%),
    rgba(2,7,9,.6);
}

.world-video-inner,
.world-reflection-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.world-video-inner > .section-kicker,
.world-video-inner > .section-title,
.world-reflection-inner > .section-kicker,
.world-reflection-inner > .section-title {
  text-align: center;
}

.video-frame {
  position: relative;
  width: min(1080px, 100%);
  margin: 36px auto 0;
  aspect-ratio: 16 / 9;
  padding: 8px;
  border: 1px solid rgba(210,170,93,.48);
  background: #010405;
  box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 45px rgba(210,170,93,.035);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* REFLECTION + ACTIONS */
.world-reflection-section {
  padding-top: clamp(76px, 8vw, 108px);
  padding-bottom: clamp(84px, 9vw, 122px);
}

.world-reflection-inner > p:not(.section-kicker) {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  color: var(--descent-muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.78;
}
.world-reflection-inner > p + p { margin-top: 19px; }

.descent-actions {
  width: min(620px, 100%);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* make two equal width columns */
  gap: 18px;
}

.descent-actions3 {
  width: min(620px, 100%);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* make three equal width columns */
  gap: 18px;
}

.descent-actions .button,
.descent-actions3 .button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid rgba(210,170,93,.72);
  color: var(--descent-gold);
  background: linear-gradient(
    180deg,
    rgba(210,170,93,.055),
    rgba(210,170,93,.015)
  );
  box-shadow:
    inset 0 0 24px rgba(210,170,93,.025),
    0 12px 30px rgba(0,0,0,.24);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.descent-actions .button:hover,
.descent-actions .button:focus-visible,
.descent-actions3 .button:hover,
.descent-actions3 .button:focus-visible {
  border-color: var(--descent-gold);
  background: rgba(210,170,93,.09);
  box-shadow:
    inset 0 0 28px rgba(210,170,93,.04),
    0 12px 36px rgba(0,0,0,.34),
    0 0 24px rgba(210,170,93,.055);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .world-card-area {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .world-card-copy {
    max-width: 820px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .descent-hero { min-height: 390px; }
  .descent-actions { grid-template-columns: 1fr; }
  .card-frame { width: min(340px, 88vw); }
}