/* Continuous paper field: the three pillars remain one shared section. */
.pillar-section {
  position: relative;
  isolation: isolate;
  background-color: #eef2f3;
  background-image:
    radial-gradient(ellipse at 4% 0%, rgb(255 248 230 / 82%), transparent 62%),
    radial-gradient(ellipse at 100% 88%, rgb(188 209 222 / 42%), transparent 65%),
    linear-gradient(115deg, #f5f4ef 0%, #edf2f4 68%, #e9eff2 100%);
}

.pillar-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/paper-grain.svg') repeat;
  opacity: .32;
  mix-blend-mode: multiply;
}

/* A quiet lunar crescent occupies the open corner, above the reading rows. */
.pillar-section::after {
  content: "";
  position: absolute;
  top: -24px;
  right: clamp(12px, 4vw, 64px);
  width: clamp(320px, 32vw, 480px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/pillars-moon.svg') center / contain no-repeat;
  opacity: .13;
  mix-blend-mode: multiply;
}

@media (max-width: 50rem) {
  .pillar-section::after {
    top: -10px;
    right: 0;
    width: 280px;
  }
}

@media (max-width: 40rem) {
  .pillar-section::after {
    top: -10px;
    right: 0;
    width: 190px;
    opacity: .12;
  }
}

.pillar-section .section-label {
  color: #40566a;
}

.pillar-section .pillars {
  border-top-color: #9aaebb;
}

.pillar-section .pillar {
  border-bottom-color: #b2c0c9;
}

@media (forced-colors: active), print {
  .pillar-section {
    background-image: none;
  }
  .pillar-section::before,
  .pillar-section::after {
    display: none;
  }
}