/* TEST — segments (3).zip on about. Natural aspect; no stretch.
   REVERT: cp about.html.bak-pre-segments-bg about.html && rm -f css/bg-segments-about.css
*/
@import url("bg-segments-test.css?v=172");

body.bg-segments-about .seg-sky {
  left: 50%; top: 50%;
  width: min(120vw, 1600px);
  transform: translate(-50%, -50%);
  opacity: 0.95; z-index: 1;
  position: absolute;
}
body.bg-segments-about .seg-moon {
  right: 8%; top: 5.8%;
  width: min(8vw, 100px); opacity: 0.95; z-index: 4;
  position: absolute;
  filter: drop-shadow(0 0 16px rgba(200,220,255,0.35));
}
body.bg-segments-about .seg-cliff {
  right: 0; bottom: 0;
  width: min(28vw, 400px); opacity: 0.78; z-index: 5;
  position: absolute;
}
body.bg-segments-about .seg-cypress {
  left: 2%; bottom: 4%;
  width: min(12vw, 160px); opacity: 0.83; z-index: 7;
}
body.bg-segments-about .seg-lonetree {
  left: 16%; bottom: 2%;
  width: min(11vw, 145px); opacity: 0.78; z-index: 7;
}
body.bg-segments-about .seg-clock {
  right: 2%; top: 18%;
  width: min(16vw, 240px); opacity: 0.90; z-index: 12;
  filter: drop-shadow(0 0 28px rgba(80,255,140,0.28));
}
body.bg-segments-about .seg-liquid {
  left: 4%; top: -2%;
  width: min(13vw, 190px); opacity: 0.66; z-index: 6;
  position: absolute;
}
body.bg-segments-about .seg-logo {
  right: 6%; bottom: 8%;
  width: min(8vw, 100px); opacity: 0.63; z-index: 8;
  position: absolute;
}
body.bg-segments-about .page-hero,
body.bg-segments-about .hero { background: transparent; }
body.bg-segments-about main .wrap {
  background: rgba(7, 9, 15, 0.45);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Keep About hero text box clear of right-side moon/cliff art */
body.bg-segments-about .page-hero > .wrap {
  width: min(34rem, calc(100% - 2.5rem));
  max-width: 34rem;
  margin-left: max(1.25rem, calc(50% - (var(--max) / 2)));
  margin-right: auto;
  box-sizing: border-box;
}



/* hide removed defective about clocks */
body.bg-segments-about .seg-clock,
body.bg-segments-about .chrono-clock,
body[data-page="about"] .seg-clock,
body[data-page="about"] .chrono-clock {
  display: none !important;
}


/* No decorative art behind Why glow matters + body copy */
body.bg-segments-about .seg-cliff,
body.bg-segments-about .seg-cypress,
body.bg-segments-about .seg-lonetree,
body.bg-segments-about .seg-liquid,
body.bg-segments-about .seg-logo,
body.bg-segments-about .chrono-hand {
  display: none !important;
}
body.bg-segments-about .page-hero,
body.bg-segments-about .page-hero > .wrap,
body.bg-segments-about main .section,
body.bg-segments-about main .wrap.prose,
body.bg-segments-about main .wrap {
  background: rgba(7, 9, 15, 0.94) !important;
  backdrop-filter: none;
}
body.bg-segments-about .page-hero {
  position: relative;
  z-index: 2;
}
body.bg-segments-about main .section {
  position: relative;
  z-index: 2;
}