/* Final visual refinements layered after the base site and Kit styles. */

/* Kit can leave its original decorative column in the layout after the visible
   background, heading, and subheading have been hidden. Remove that empty
   column while preserving the column that actually contains form controls. */
.kit-form-shell .formkit-column:has(> .formkit-background):not(:has(input)):not(:has(button)) {
  display: none !important;
}

/* Build the crescent inside a centered circle rather than offsetting a second disc. */
.sigil-moon {
  position: relative;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #f0e9f4, #9d8bb2 74%);
  box-shadow: none;
  filter: drop-shadow(0 0 28px rgba(192, 161, 220, 0.34));
  -webkit-mask: radial-gradient(circle at 68% 47%, transparent 0 45%, #000 46%);
  mask: radial-gradient(circle at 68% 47%, transparent 0 45%, #000 46%);
}

.sigil-moon::after {
  display: none;
}

.author-note {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 38%, rgba(130, 91, 170, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(20, 18, 31, 0.92), rgba(13, 12, 20, 0.96));
}

.author-note::after {
  position: absolute;
  right: -9rem;
  bottom: -14rem;
  width: 34rem;
  aspect-ratio: 1;
  border: 1px solid rgba(221, 211, 230, 0.08);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 4rem rgba(221, 211, 230, 0.014),
    0 0 0 9rem rgba(221, 211, 230, 0.01);
  pointer-events: none;
}

.author-note-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: clamp(48px, 9vw, 130px);
  align-items: start;
}

.author-note-side {
  position: sticky;
  top: 132px;
  border-left: 1px solid var(--line-strong);
  padding-left: 24px;
}

.author-note-sidecopy {
  max-width: 270px;
  margin: 0 0 30px;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1.45;
}

.author-note-copy blockquote {
  max-width: 920px;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.45rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
}

.author-note-intro {
  max-width: 760px;
  margin: 38px 0 0;
  color: var(--ink-muted);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
}

.author-note-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 50px;
}

.author-note-card {
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 72%),
    rgba(12, 11, 19, 0.58);
}

.author-note-card span {
  display: block;
  margin-bottom: 34px;
  color: var(--violet-bright);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.author-note-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.2;
}

.author-note-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .author-note-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .author-note-side {
    position: static;
    max-width: 620px;
  }

  .author-note-details {
    grid-template-columns: 1fr;
  }

  .author-note-card {
    min-height: 0;
  }

  .author-note-card span {
    margin-bottom: 20px;
  }
}

@media (max-width: 560px) {
  .author-note-copy blockquote {
    font-size: clamp(2.2rem, 12vw, 3.35rem);
  }

  .author-note-card {
    border-radius: 20px;
    padding: 24px;
  }
}