/* Shared visual accent: navy N gradient and warm editorial section numerals. */
:root {
  --section-numeral: rgba(201, 130, 50, 0.30);
}

/* Top-page N panel: retain the ripple, remove the rectangular edge, add depth. */
.hero-visual {
  animation: none;
  background: linear-gradient(
    180deg,
    #081d34 0%,
    #0b2a50 36%,
    #103a74 68%,
    #164d98 100%
  );
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
  clip-path: none;
}

.hero-visual::before,
.hero-visual::after {
  border-color: rgba(222, 240, 250, 0.24);
  box-shadow: 0 0 58px rgba(194, 226, 243, 0.08);
}

.hero-monogram-base {
  opacity: 0 !important;
}

.hero-monogram-gold {
  filter: blur(1.6px) brightness(0.82) saturate(0.66);
}

/* Large editorial numerals used across section-based pages. */
[data-section-number],
.column-index {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-section-number] > *,
.column-index > * {
  position: relative;
  z-index: 1;
}

[data-section-number]::after,
.column-index::after {
  color: var(--section-numeral);
  content: attr(data-section-number);
  font-family: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
  font-size: clamp(150px, 19vw, 300px);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.12em;
  line-height: 0.75;
  pointer-events: none;
  position: absolute;
  right: 4vw;
  top: 34px;
  z-index: 0;
}

.column-index::after {
  content: "01";
}

[data-section-number="02"]::after,
[data-section-number="04"]::after,
[data-section-number="06"]::after {
  left: 3vw;
  right: auto;
}

/* Existing article numerals use the same calligraphic treatment. */
.article-body .section-number,
article > section > .section-number {
  color: rgb(201 130 50 / 78%);
  font-family: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.04em;
}

@media (width <= 900px) {
  .hero-visual {
    box-shadow: none;
  }

  [data-section-number]::after,
  .column-index::after {
    font-size: clamp(104px, 30vw, 164px);
    left: auto;
    right: 18px;
    top: 38px;
  }

  [data-section-number="02"]::after,
  [data-section-number="04"]::after,
  [data-section-number="06"]::after {
    left: 14px;
    right: auto;
  }
}

@media (width <= 560px) {
  [data-section-number]::after,
  .column-index::after {
    font-size: clamp(88px, 27vw, 126px);
    opacity: 0.82;
    top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual {
    animation: none;
    clip-path: none;
  }
}