/* A quiet paper landscape, painted above section backgrounds and below content. */
body { isolation: isolate; }
.hero,
.activity-nav,
main > .section-wrap,
.process > .section-wrap,
.awards > .section-wrap,
.closing,
.footer { position: relative; z-index: 1; }
.scene-effects {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.scene-effects *, .scene-effects *::before, .scene-effects *::after { pointer-events: none; }
.fx-scenery { position: absolute; top: 0; width: var(--scenery-size); }
.fx-scenery > svg { display: block; width: 100%; height: 100%; overflow: visible !important; }
/* The screen edge crops each silhouette; the centre is deliberately empty. */
.fx-moon { --scenery-size: clamp(270px, 26vw, 420px); right: calc(var(--scenery-size) * -.35); opacity: .42; }
.fx-cloud { --scenery-size: clamp(180px, 19vw, 270px); left: 2vw; opacity: .3; }
.fx-star { opacity: .34; }
.fx-star-one { --scenery-size: clamp(48px, 5vw, 72px); left: clamp(90px, 13vw, 200px); }
.fx-star-two { --scenery-size: clamp(135px, 14vw, 180px); left: calc(var(--scenery-size) * -.22); }
.fx-star-three { --scenery-size: clamp(60px, 6vw, 90px); right: clamp(70px, 14vw, 210px); }
.fx-star-four { --scenery-size: clamp(36px, 4vw, 58px); left: clamp(45px, 7vw, 130px); opacity: .28; }
.fx-star-five { --scenery-size: clamp(110px, 12vw, 155px); right: calc(var(--scenery-size) * -.15); }
.fx-tree { --scenery-size: clamp(300px, 31vw, 460px); left: calc(var(--scenery-size) * -.48); opacity: .34; }
.fx-sprig { --scenery-size: clamp(160px, 18vw, 250px); right: calc(var(--scenery-size) * -.32); opacity: .33; }
.fx-poplar { --scenery-size: clamp(240px, 24vw, 340px); left: calc(var(--scenery-size) * -.48); opacity: .32; }
.fx-fern { --scenery-size: clamp(185px, 19vw, 280px); right: calc(var(--scenery-size) * -.25); opacity: .33; }
.fx-flowers { --scenery-size: clamp(80px, 10vw, 135px); left: clamp(30px, 8vw, 135px); opacity: .4; }
.fx-mushrooms { --scenery-size: clamp(170px, 19vw, 270px); right: calc(var(--scenery-size) * -.25); opacity: .34; }
.fx-grass { --scenery-size: clamp(230px, 25vw, 360px); left: calc(var(--scenery-size) * -.43); opacity: .34; }
.fx-clover { --scenery-size: clamp(180px, 20vw, 280px); right: calc(var(--scenery-size) * -.25); opacity: .34; }
.fx-meadow { --scenery-size: clamp(140px, 17vw, 220px); left: calc(var(--scenery-size) * -.28); opacity: .32; }
.fx-meadow > svg { transform: scaleX(-1) rotate(-8deg); }
body.dialog-open .scene-effects,
body:has(#brief-dialog[open]) .scene-effects,
body.dialog-open .effects-toggle,
body:has(#brief-dialog[open]) .effects-toggle { visibility: hidden; }
.effects-toggle { position: fixed; left: 19px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 13px; background: #faf8eee8; border: 1px solid #cdd6bf; border-radius: 24px; color: #687d58; box-shadow: 0 2px 12px #3c50310a; font: 10px/1.5 var(--sans); letter-spacing: .035em; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, border-color .2s; }
.effects-toggle:hover { background: #eff2e5; border-color: #95a783; }
.effects-toggle > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.effects-toggle[aria-pressed="false"] { color: #8f967f; }
.effects-toggle[aria-pressed="false"] > svg { opacity: .5; }
@media (max-width: 700px) {
  .fx-moon { --scenery-size: 205px; right: -119px; opacity: .24; }
  .fx-cloud { --scenery-size: 135px; left: -71px; opacity: .2; }
  .fx-star { opacity: .22; }
  .fx-star-one { --scenery-size: 32px; left: 30px; }
  .fx-star-two { --scenery-size: 92px; left: -45px; }
  .fx-star-three { --scenery-size: 36px; right: 21px; }
  .fx-star-four { --scenery-size: 28px; left: 40px; }
  .fx-star-five { --scenery-size: 84px; right: -43px; }
  .fx-tree { --scenery-size: 260px; left: -185px; opacity: .2; }
  .fx-sprig { --scenery-size: 148px; right: -92px; opacity: .22; }
  .fx-poplar { --scenery-size: 210px; left: -143px; opacity: .2; }
  .fx-fern { --scenery-size: 160px; right: -100px; opacity: .22; }
  .fx-flowers { --scenery-size: 80px; left: -22px; opacity: .23; }
  .fx-mushrooms { --scenery-size: 150px; right: -95px; opacity: .23; }
  .fx-grass { --scenery-size: 205px; left: -137px; opacity: .21; }
  .fx-clover { --scenery-size: 155px; right: -99px; opacity: .23; }
  .fx-meadow { --scenery-size: 110px; left: -58px; opacity: .22; }
  .effects-toggle { left: 12px; min-height: 44px; padding: 8px 11px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .effects-toggle { transition: none; }
  .fx-scenery { will-change: auto; }
}