/* One dusk palette meets at the section edge; only the scenery is blended. */
html[data-concept="stoic"][data-water="twilight"] {
  --twilight-sky-band: linear-gradient(90deg, #e4c5d9, #ebcbd5 52%, #f1cfc4);
  --twilight-sky-height: max(0px, min(34.444%, calc(50% - 15.556vw)));
  --twilight-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-concept="stoic"][data-water="twilight"] .hero {
  background:
    var(--twilight-grain),
    linear-gradient(180deg, #cec2f1, #d8cced 40%, #e4c5d955 76%, #e4c5d900),
    var(--twilight-sky-band);
}
html[data-concept="stoic"][data-water="twilight"] .site-header:not(.is-scrolled) .site-nav {
  color: #211f25;
}
/* The cover crop changes with viewport shape. This short sky-only extension
   keeps the meeting edge identical without moving or masking the foreground. */
html[data-concept="stoic"][data-water="twilight"] .belief-wave::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--twilight-sky-height);
  z-index: 1;
  pointer-events: none;
  background: var(--twilight-grain), var(--twilight-sky-band);
  -webkit-mask-image: linear-gradient(#000, #0000);
  mask-image: linear-gradient(#000, #0000);
}
html[data-concept="stoic"][data-water="twilight"] .belief::after {
  background: transparent;
}