.imperial-page {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: 1rem 1.25rem 4rem;
}

.imperial-hero {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 0 2rem;
}

.imperial-eyebrow {
  color: #77d9c8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.imperial-hero h1 {
  color: var(--text);
  font-size: clamp(3rem, 9vw, 6.8rem);
  line-height: 0.9;
  max-width: 8ch;
}

.imperial-hero-copy {
  max-width: 58ch;
  color: var(--text);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.65;
}

.imperial-hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.imperial-primary-link,
.imperial-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.imperial-primary-link {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 16px 36px rgba(245, 181, 68, 0.22);
}

.imperial-secondary-link {
  color: var(--text);
  border: 1px solid rgba(119, 217, 200, 0.38);
  background: rgba(119, 217, 200, 0.07);
}

.imperial-workbench {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.92fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin: 1rem 0 4rem;
}

.volvelle-stage {
  display: grid;
  place-items: center;
  min-height: 620px;
}

.volvelle {
  --sun-angle: 0deg;
  --moon-angle: 120deg;
  --node-angle: 220deg;
  --moon-shadow: 50%;
  --sun-pearl-radius: min(244px, 41vw);
  --moon-pearl-radius: min(176px, 28vw);
  position: relative;
  width: min(580px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 181, 68, 0.18) 0 9%, transparent 9.5%),
    radial-gradient(circle at 50% 50%, rgba(119, 217, 200, 0.08) 0 36%, transparent 37%),
    radial-gradient(circle at 50% 50%, rgba(155, 59, 80, 0.22), rgba(8, 8, 26, 0.12) 68%);
  border: 1px solid rgba(245, 181, 68, 0.35);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.36),
    inset 0 0 50px rgba(245, 181, 68, 0.1);
  transition: transform 0.7s ease;
}

.disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.zodiac-disc {
  background:
    repeating-conic-gradient(from -15deg, rgba(245, 181, 68, 0.18) 0deg 1deg, transparent 1deg 30deg),
    conic-gradient(
      rgba(119, 217, 200, 0.16) 0deg 30deg,
      rgba(155, 59, 80, 0.18) 30deg 60deg,
      rgba(245, 181, 68, 0.13) 60deg 90deg,
      rgba(119, 217, 200, 0.16) 90deg 120deg,
      rgba(155, 59, 80, 0.18) 120deg 150deg,
      rgba(245, 181, 68, 0.13) 150deg 180deg,
      rgba(119, 217, 200, 0.16) 180deg 210deg,
      rgba(155, 59, 80, 0.18) 210deg 240deg,
      rgba(245, 181, 68, 0.13) 240deg 270deg,
      rgba(119, 217, 200, 0.16) 270deg 300deg,
      rgba(155, 59, 80, 0.18) 300deg 330deg,
      rgba(245, 181, 68, 0.13) 330deg 360deg
    );
  border: 1px solid rgba(245, 181, 68, 0.28);
}

.calendar-disc {
  inset: 10%;
  background:
    repeating-conic-gradient(rgba(237, 237, 247, 0.28) 0deg 0.55deg, transparent 0.55deg 10deg),
    radial-gradient(circle, transparent 0 65%, rgba(10, 10, 26, 0.55) 66% 68%, transparent 69%);
  border: 1px solid rgba(119, 217, 200, 0.22);
  transform: rotate(var(--sun-angle));
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.node-disc {
  inset: 19%;
  border: 1px dashed rgba(245, 181, 68, 0.36);
  transform: rotate(var(--node-angle));
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.moon-disc {
  inset: 30%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 217, 200, 0.36);
  background: radial-gradient(circle, rgba(237, 237, 247, 0.08), rgba(10, 10, 26, 0.5));
  transform: rotate(var(--moon-angle));
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.moon-window {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(8, 8, 26, 0.92) var(--moon-shadow), rgba(237, 237, 247, 0.92) var(--moon-shadow)),
    #ededf7;
  border: 1px solid rgba(237, 237, 247, 0.72);
  box-shadow: 0 0 24px rgba(237, 237, 247, 0.2);
}

.zodiac-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.2rem;
  margin-left: -3.6rem;
  margin-top: -0.8rem;
  color: rgba(237, 237, 247, 0.86);
  font-family: var(--font-accent);
  font-size: clamp(0.58rem, 1.45vw, 0.78rem);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transform-origin: 50% 0;
}

.sign-0 { transform: rotate(15deg) translateY(-244px) rotate(-15deg); }
.sign-1 { transform: rotate(45deg) translateY(-244px) rotate(-45deg); }
.sign-2 { transform: rotate(75deg) translateY(-244px) rotate(-75deg); }
.sign-3 { transform: rotate(105deg) translateY(-244px) rotate(-105deg); }
.sign-4 { transform: rotate(135deg) translateY(-244px) rotate(-135deg); }
.sign-5 { transform: rotate(165deg) translateY(-244px) rotate(-165deg); }
.sign-6 { transform: rotate(195deg) translateY(-244px) rotate(-195deg); }
.sign-7 { transform: rotate(225deg) translateY(-244px) rotate(-225deg); }
.sign-8 { transform: rotate(255deg) translateY(-244px) rotate(-255deg); }
.sign-9 { transform: rotate(285deg) translateY(-244px) rotate(-285deg); }
.sign-10 { transform: rotate(315deg) translateY(-244px) rotate(-315deg); }
.sign-11 { transform: rotate(345deg) translateY(-244px) rotate(-345deg); }

.dragon-node {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4.5rem;
  margin-left: -2.25rem;
  color: #77d9c8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.dragon-tail {
  top: auto;
  bottom: 0;
  color: #f5b544;
  transform: rotate(180deg);
}

.thread {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 43%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(237, 237, 247, 0.88), rgba(237, 237, 247, 0));
}

.sun-thread { transform: rotate(var(--sun-angle)); }
.moon-thread {
  height: 34%;
  background: linear-gradient(to bottom, rgba(119, 217, 200, 0.88), rgba(119, 217, 200, 0));
  transform: rotate(var(--moon-angle));
}

.pearl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #ededf7;
  box-shadow: 0 0 20px rgba(237, 237, 247, 0.45);
}

.sun-pearl { transform: rotate(var(--sun-angle)) translateY(calc(0px - var(--sun-pearl-radius))); }
.moon-pearl {
  background: #77d9c8;
  transform: rotate(var(--moon-angle)) translateY(calc(0px - var(--moon-pearl-radius)));
}

.volvelle-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1205, #0b0b1a 72%);
  border: 1px solid rgba(245, 181, 68, 0.52);
  color: var(--gold);
  font-family: var(--font-accent);
  text-align: center;
}

.volvelle-center span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.volvelle-center strong {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
}

.imperial-panel {
  border: 1px solid rgba(119, 217, 200, 0.22);
  border-radius: 8px;
  background: rgba(18, 18, 43, 0.74);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
}

.imperial-panel h2,
.imperial-context h2,
.imperial-sources h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--text);
  margin-bottom: 0.65rem;
}

.imperial-panel-copy,
.imperial-context p,
.imperial-sources p {
  color: var(--text-muted);
  line-height: 1.75;
}

.imperial-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.imperial-field {
  display: grid;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.imperial-field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(119, 217, 200, 0.26);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.72);
  color: var(--text);
  font: inherit;
  padding: 0.7rem 0.85rem;
}

.imperial-submit {
  grid-column: 1 / -1;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: #77d9c8;
  color: #071616;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.imperial-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

.imperial-result {
  min-height: 94px;
  border: 1px solid rgba(245, 181, 68, 0.18);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.48);
  padding: 0.9rem;
}

.result-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.imperial-result strong {
  display: block;
  margin-top: 0.35rem;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1.25;
}

.imperial-reading {
  border-left: 3px solid #77d9c8;
  padding-left: 1rem;
  color: var(--text);
  line-height: 1.7;
}

.imperial-context {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin: 3rem 0;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.context-item {
  border: 1px solid rgba(245, 181, 68, 0.18);
  border-radius: 8px;
  background: rgba(10, 10, 26, 0.5);
  padding: 1rem;
}

.context-number {
  color: #77d9c8;
  font-family: var(--font-accent);
  font-size: 2rem;
  line-height: 1;
}

.context-item h3 {
  color: var(--text);
  font-size: 1.2rem;
  margin: 0.55rem 0 0.35rem;
}

.context-item p {
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.imperial-sources {
  border-top: 1px solid rgba(119, 217, 200, 0.18);
  padding-top: 2rem;
}

.imperial-sources ul {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0 1.1rem;
}

.imperial-sources a {
  color: #77d9c8;
}

@media (max-width: 900px) {
  .imperial-workbench,
  .imperial-context {
    grid-template-columns: 1fr;
  }

  .volvelle-stage {
    min-height: auto;
  }

  .sign-0 { transform: rotate(15deg) translateY(-42vw) rotate(-15deg); }
  .sign-1 { transform: rotate(45deg) translateY(-42vw) rotate(-45deg); }
  .sign-2 { transform: rotate(75deg) translateY(-42vw) rotate(-75deg); }
  .sign-3 { transform: rotate(105deg) translateY(-42vw) rotate(-105deg); }
  .sign-4 { transform: rotate(135deg) translateY(-42vw) rotate(-135deg); }
  .sign-5 { transform: rotate(165deg) translateY(-42vw) rotate(-165deg); }
  .sign-6 { transform: rotate(195deg) translateY(-42vw) rotate(-195deg); }
  .sign-7 { transform: rotate(225deg) translateY(-42vw) rotate(-225deg); }
  .sign-8 { transform: rotate(255deg) translateY(-42vw) rotate(-255deg); }
  .sign-9 { transform: rotate(285deg) translateY(-42vw) rotate(-285deg); }
  .sign-10 { transform: rotate(315deg) translateY(-42vw) rotate(-315deg); }
  .sign-11 { transform: rotate(345deg) translateY(-42vw) rotate(-345deg); }
}

@media (max-width: 680px) {
  .imperial-page {
    padding: 0.5rem 1rem 3rem;
  }

  .imperial-hero {
    min-height: 36vh;
    padding-top: 1.5rem;
  }

  .imperial-form,
  .imperial-results,
  .context-grid {
    grid-template-columns: 1fr;
  }

  .volvelle {
    width: min(430px, 92vw);
  }

  .volvelle-center {
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
  }

  .dragon-node {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .volvelle,
  .calendar-disc,
  .node-disc,
  .moon-disc {
    transition: none;
  }
}