:root[data-horizon] .landscape {
  visibility: visible;
  --A: 70;
  --vs: 1;
}

:root[data-horizon] .landscape__sun,
:root[data-horizon] .landscape__mist {
  display: none;
}

:root[data-horizon] .landscape__sky {
  background-image: linear-gradient(180deg, var(--sky-top) 0, var(--sky-mid) 38%, var(--haze) calc(var(--sky-haze-at) * 1%), var(--haze) 100%);
  background-size: auto;
}

:root[data-horizon] .landscape__layer {
  top: 0;
  height: 100%;
  left: -8%;
  width: 116%;
  transform-origin: 50% calc(var(--A) * 1%);
  translate: 0 calc(var(--hz, calc(var(--A) * 1%)) - var(--A) * 1%);
  scale: 1 var(--vs);
}

:root[data-horizon] .landscape__surface {
  -webkit-mask-image: none;
  mask-image: none;
  background-image:
    radial-gradient(ellipse 45% 60% at 78% 30%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--lay) 0, var(--lay) var(--fade-from), var(--haze) calc(var(--A) * 1% + 6%), var(--haze) 100%);
}

:root[data-horizon] .landscape__layer--far .landscape__surface {
  --lay: var(--far);
  --fade-from: 30%;
}

:root[data-horizon] .landscape__layer--middle .landscape__surface {
  --lay: var(--mid);
  --fade-from: 42%;
}

:root[data-horizon] .landscape__layer--near .landscape__surface {
  --lay: var(--near);
  --fade-from: 54%;
}

@media (max-width: 760px) {
  :root[data-horizon] .landscape__layer {
    left: -30%;
    width: 160%;
    top: 0;
    height: 100%;
  }
}

:root[data-horizon="varieties"] .landscape {
  --A: 70;
  --vs: 1;
  --sky-haze-at: 62;
  --haze: #252423;
  --far: #2f332d;
  --mid: #272b25;
  --near: #1f221e;
  --sky-top: #0d0d0c;
  --sky-mid: #171716;
  --glow: rgba(212, 174, 98, .10);
}

:root[data-horizon="varieties"][data-theme="light"] .landscape {
  --A: 70;
  --vs: 1;
  --sky-haze-at: 62;
  --haze: #eae9e6;
  --far: #ccd3c6;
  --mid: #aeb8a6;
  --near: #8f9b86;
  --sky-top: #ffffff;
  --sky-mid: #f6f6f3;
  --glow: rgba(255, 240, 210, .45);
}

:root[data-horizon="varieties"] .landscape__layer--far .landscape__surface {
  clip-path: polygon(0.0% 48.0%, 1.0% 48.0%, 2.0% 47.9%, 3.0% 47.7%, 4.0% 47.5%, 5.0% 47.3%, 6.0% 47.0%, 7.0% 46.8%, 8.0% 46.6%, 9.0% 46.3%, 10.0% 45.9%, 11.0% 45.5%, 12.0% 45.0%, 13.0% 44.4%, 14.0% 44.0%, 15.0% 43.6%, 16.0% 43.4%, 17.0% 43.3%, 18.0% 43.3%, 19.0% 43.3%, 20.0% 43.4%, 21.0% 43.4%, 22.0% 43.3%, 23.0% 43.1%, 24.0% 42.8%, 25.0% 42.3%, 26.0% 41.8%, 27.0% 41.3%, 28.0% 40.9%, 29.0% 40.5%, 30.0% 40.2%, 31.0% 40.0%, 32.0% 39.9%, 33.0% 39.8%, 34.0% 39.9%, 35.0% 39.9%, 36.0% 40.0%, 37.0% 40.1%, 38.0% 40.2%, 39.0% 40.4%, 40.0% 40.6%, 41.0% 40.8%, 42.0% 41.1%, 43.0% 41.5%, 44.0% 41.9%, 45.0% 42.2%, 46.0% 42.5%, 47.0% 42.5%, 48.0% 42.4%, 49.0% 42.0%, 50.0% 41.5%, 51.0% 40.8%, 52.0% 40.1%, 53.0% 39.4%, 54.0% 38.6%, 55.0% 38.0%, 56.0% 37.4%, 57.0% 37.0%, 58.0% 36.6%, 59.0% 36.2%, 60.0% 35.8%, 61.0% 35.4%, 62.0% 35.0%, 63.0% 34.8%, 64.0% 34.6%, 65.0% 34.5%, 66.0% 34.4%, 67.0% 34.2%, 68.0% 34.1%, 69.0% 34.0%, 70.0% 34.0%, 71.0% 34.0%, 72.0% 34.1%, 73.0% 34.3%, 74.0% 34.7%, 75.0% 35.4%, 76.0% 36.3%, 77.0% 37.3%, 78.0% 38.3%, 79.0% 39.2%, 80.0% 40.0%, 81.0% 40.6%, 82.0% 41.1%, 83.0% 41.6%, 84.0% 42.1%, 85.0% 42.7%, 86.0% 43.3%, 87.0% 44.0%, 88.0% 44.8%, 89.0% 45.6%, 90.0% 46.5%, 91.0% 47.5%, 92.0% 48.4%, 93.0% 49.4%, 94.0% 50.2%, 95.0% 51.0%, 96.0% 51.5%, 97.0% 51.9%, 98.0% 52.0%, 99.0% 51.7%, 100.0% 51.2%, 100% 100%, 0% 100%);
}

:root[data-horizon="varieties"] .landscape__layer--middle .landscape__surface {
  clip-path: polygon(0.0% 45.2%, 1.0% 45.2%, 2.0% 45.2%, 3.0% 45.1%, 4.0% 45.1%, 5.0% 45.1%, 6.0% 45.0%, 7.0% 45.0%, 8.0% 45.0%, 9.0% 45.0%, 10.0% 45.0%, 11.0% 45.0%, 12.0% 45.2%, 13.0% 45.7%, 14.0% 46.2%, 15.0% 46.7%, 16.0% 46.9%, 17.0% 46.9%, 18.0% 46.7%, 19.0% 46.4%, 20.0% 46.1%, 21.0% 45.9%, 22.0% 45.9%, 23.0% 46.0%, 24.0% 46.4%, 25.0% 47.0%, 26.0% 47.7%, 27.0% 48.4%, 28.0% 49.0%, 29.0% 49.6%, 30.0% 50.1%, 31.0% 50.5%, 32.0% 50.8%, 33.0% 50.9%, 34.0% 51.1%, 35.0% 51.2%, 36.0% 51.2%, 37.0% 51.1%, 38.0% 50.8%, 39.0% 50.4%, 40.0% 50.0%, 41.0% 49.7%, 42.0% 49.4%, 43.0% 49.3%, 44.0% 49.2%, 45.0% 49.1%, 46.0% 49.1%, 47.0% 49.3%, 48.0% 49.6%, 49.0% 50.2%, 50.0% 50.9%, 51.0% 51.7%, 52.0% 52.6%, 53.0% 53.5%, 54.0% 54.3%, 55.0% 55.0%, 56.0% 55.6%, 57.0% 56.2%, 58.0% 56.7%, 59.0% 57.3%, 60.0% 57.9%, 61.0% 58.6%, 62.0% 59.3%, 63.0% 59.9%, 64.0% 60.4%, 65.0% 60.6%, 66.0% 60.7%, 67.0% 60.8%, 68.0% 60.8%, 69.0% 60.9%, 70.0% 61.0%, 71.0% 61.0%, 72.0% 60.7%, 73.0% 60.2%, 74.0% 59.7%, 75.0% 59.2%, 76.0% 58.8%, 77.0% 58.5%, 78.0% 58.2%, 79.0% 57.9%, 80.0% 57.5%, 81.0% 57.1%, 82.0% 56.6%, 83.0% 56.1%, 84.0% 55.7%, 85.0% 55.3%, 86.0% 55.0%, 87.0% 54.8%, 88.0% 54.6%, 89.0% 54.4%, 90.0% 54.2%, 91.0% 54.0%, 92.0% 53.8%, 93.0% 53.8%, 94.0% 53.9%, 95.0% 54.1%, 96.0% 54.3%, 97.0% 54.4%, 98.0% 54.5%, 99.0% 54.8%, 100.0% 55.2%, 100% 100%, 0% 100%);
}

:root[data-horizon="varieties"] .landscape__layer--near .landscape__surface {
  clip-path: polygon(0.0% 57.2%, 1.0% 57.7%, 2.0% 58.9%, 3.0% 60.5%, 4.0% 62.1%, 5.0% 63.3%, 6.0% 64.2%, 7.0% 65.0%, 8.0% 65.8%, 9.0% 66.6%, 10.0% 66.9%, 11.0% 67.0%, 12.0% 67.0%, 13.0% 66.9%, 14.0% 66.8%, 15.0% 66.8%, 16.0% 66.7%, 17.0% 66.8%, 18.0% 66.8%, 19.0% 66.7%, 20.0% 66.2%, 21.0% 65.4%, 22.0% 64.4%, 23.0% 63.3%, 24.0% 62.4%, 25.0% 61.6%, 26.0% 61.0%, 27.0% 60.6%, 28.0% 60.0%, 29.0% 59.4%, 30.0% 58.7%, 31.0% 58.2%, 32.0% 57.8%, 33.0% 57.7%, 34.0% 58.2%, 35.0% 58.8%, 36.0% 59.3%, 37.0% 59.4%, 38.0% 59.1%, 39.0% 58.6%, 40.0% 58.1%, 41.0% 57.8%, 42.0% 57.5%, 43.0% 57.2%, 44.0% 56.8%, 45.0% 56.4%, 46.0% 56.2%, 47.0% 56.2%, 48.0% 56.2%, 49.0% 56.1%, 50.0% 56.1%, 51.0% 56.1%, 52.0% 56.3%, 53.0% 56.6%, 54.0% 56.7%, 55.0% 56.6%, 56.0% 56.5%, 57.0% 56.6%, 58.0% 56.9%, 59.0% 57.1%, 60.0% 57.2%, 61.0% 57.1%, 62.0% 56.5%, 63.0% 55.8%, 64.0% 55.2%, 65.0% 55.0%, 66.0% 55.0%, 67.0% 55.2%, 68.0% 55.6%, 69.0% 56.2%, 70.0% 57.1%, 71.0% 58.1%, 72.0% 59.0%, 73.0% 59.7%, 74.0% 60.7%, 75.0% 61.8%, 76.0% 62.6%, 77.0% 62.6%, 78.0% 62.3%, 79.0% 62.0%, 80.0% 61.7%, 81.0% 61.5%, 82.0% 61.4%, 83.0% 61.3%, 84.0% 61.2%, 85.0% 61.1%, 86.0% 61.1%, 87.0% 61.1%, 88.0% 61.0%, 89.0% 60.8%, 90.0% 60.6%, 91.0% 60.1%, 92.0% 59.8%, 93.0% 59.7%, 94.0% 59.9%, 95.0% 60.1%, 96.0% 60.2%, 97.0% 60.3%, 98.0% 60.5%, 99.0% 60.7%, 100.0% 60.9%, 100% 100%, 0% 100%);
}

:root[data-horizon="history"] .landscape {
  --A: 70;
  --vs: 0.32;
  --sky-haze-at: 26;
  --haze: #33312e;
  --far: #3f3a30;
  --mid: #312d25;
  --near: #25221c;
  --sky-top: #0d0d0c;
  --sky-mid: #1b1a18;
  --glow: rgba(212, 174, 98, .12);
}

:root[data-horizon="history"][data-theme="light"] .landscape {
  --A: 70;
  --vs: 0.32;
  --sky-haze-at: 26;
  --haze: #eeece8;
  --far: #d8d1c3;
  --mid: #bfb5a0;
  --near: #a39780;
  --sky-top: #ffffff;
  --sky-mid: #f7f6f2;
  --glow: rgba(255, 236, 196, .5);
}

:root[data-horizon="history"] .landscape__layer--far .landscape__surface {
  clip-path: polygon(0.0% 14.0%, 0.8% 14.4%, 1.6% 15.5%, 2.4% 16.8%, 3.2% 17.9%, 4.0% 19.1%, 4.8% 20.3%, 5.6% 21.5%, 6.4% 22.4%, 7.2% 23.5%, 8.0% 24.8%, 8.8% 26.1%, 9.6% 27.0%, 10.4% 27.4%, 11.2% 27.4%, 12.0% 27.4%, 12.8% 28.0%, 13.6% 29.1%, 14.4% 30.3%, 15.2% 31.5%, 16.0% 31.7%, 16.8% 29.4%, 17.6% 32.9%, 18.4% 34.9%, 19.2% 35.2%, 20.0% 34.2%, 20.8% 32.7%, 21.6% 31.8%, 22.4% 31.7%, 23.2% 33.5%, 24.0% 34.7%, 24.8% 34.9%, 25.6% 34.4%, 26.4% 33.5%, 27.2% 32.9%, 28.0% 33.2%, 28.8% 34.5%, 29.6% 36.2%, 30.4% 37.5%, 31.2% 38.1%, 32.0% 36.6%, 32.8% 36.8%, 33.6% 38.3%, 34.4% 36.8%, 35.2% 33.2%, 36.0% 32.8%, 36.8% 35.3%, 37.6% 37.8%, 38.4% 39.6%, 39.2% 40.8%, 40.0% 41.0%, 40.8% 40.2%, 41.6% 38.2%, 42.4% 35.6%, 43.2% 34.5%, 44.0% 33.1%, 44.8% 32.2%, 45.6% 31.9%, 46.4% 30.9%, 47.2% 31.3%, 48.0% 35.0%, 48.8% 37.8%, 49.6% 39.0%, 50.4% 39.4%, 51.2% 39.1%, 52.0% 38.4%, 52.8% 37.9%, 53.6% 37.2%, 54.4% 36.3%, 55.2% 35.3%, 56.0% 34.1%, 56.8% 31.4%, 57.6% 34.0%, 58.4% 35.6%, 59.2% 36.3%, 60.0% 37.0%, 60.8% 37.8%, 61.6% 38.9%, 62.4% 39.6%, 63.2% 39.0%, 64.0% 42.0%, 64.8% 43.2%, 65.6% 42.5%, 66.4% 39.5%, 67.2% 40.1%, 68.0% 38.2%, 68.8% 39.5%, 69.6% 40.8%, 70.4% 43.2%, 71.2% 43.1%, 72.0% 40.8%, 72.8% 36.5%, 73.6% 33.6%, 74.4% 29.5%, 75.2% 29.3%, 76.0% 33.8%, 76.8% 37.0%, 77.6% 39.2%, 78.4% 41.3%, 79.2% 43.1%, 80.0% 44.4%, 80.8% 45.1%, 81.6% 44.0%, 82.4% 45.0%, 83.2% 46.0%, 84.0% 45.7%, 84.8% 43.8%, 85.6% 44.0%, 86.4% 43.4%, 87.2% 41.7%, 88.0% 39.5%, 88.8% 37.2%, 89.6% 35.9%, 90.4% 33.2%, 91.2% 32.3%, 92.0% 33.3%, 92.8% 32.5%, 93.6% 31.5%, 94.4% 30.5%, 95.2% 29.8%, 96.0% 29.1%, 96.8% 26.5%, 97.6% 23.1%, 98.4% 24.8%, 99.2% 26.0%, 100.0% 27.7%, 100% 100%, 0% 100%);
}

:root[data-horizon="history"] .landscape__layer--middle .landscape__surface {
  clip-path: polygon(0.0% 28.0%, 0.8% 28.4%, 1.6% 29.3%, 2.4% 30.1%, 3.2% 31.7%, 4.0% 33.2%, 4.8% 33.2%, 5.6% 32.8%, 6.4% 36.2%, 7.2% 35.9%, 8.0% 38.4%, 8.8% 40.2%, 9.6% 38.9%, 10.4% 35.7%, 11.2% 33.6%, 12.0% 37.9%, 12.8% 41.9%, 13.6% 42.4%, 14.4% 42.4%, 15.2% 42.5%, 16.0% 41.7%, 16.8% 43.5%, 17.6% 46.1%, 18.4% 46.8%, 19.2% 46.5%, 20.0% 44.1%, 20.8% 43.4%, 21.6% 41.6%, 22.4% 38.2%, 23.2% 34.9%, 24.0% 34.6%, 24.8% 38.4%, 25.6% 43.6%, 26.4% 46.7%, 27.2% 47.8%, 28.0% 48.4%, 28.8% 46.9%, 29.6% 46.4%, 30.4% 48.8%, 31.2% 47.9%, 32.0% 48.6%, 32.8% 46.2%, 33.6% 47.2%, 34.4% 48.4%, 35.2% 49.7%, 36.0% 52.5%, 36.8% 53.8%, 37.6% 53.8%, 38.4% 53.1%, 39.2% 53.1%, 40.0% 53.9%, 40.8% 54.0%, 41.6% 52.3%, 42.4% 49.1%, 43.2% 48.2%, 44.0% 48.0%, 44.8% 47.2%, 45.6% 45.0%, 46.4% 40.8%, 47.2% 37.6%, 48.0% 34.2%, 48.8% 31.6%, 49.6% 30.4%, 50.4% 30.1%, 51.2% 34.4%, 52.0% 38.3%, 52.8% 42.3%, 53.6% 45.4%, 54.4% 47.9%, 55.2% 48.7%, 56.0% 50.7%, 56.8% 51.2%, 57.6% 51.2%, 58.4% 51.6%, 59.2% 50.2%, 60.0% 47.8%, 60.8% 46.3%, 61.6% 45.5%, 62.4% 47.7%, 63.2% 49.5%, 64.0% 49.6%, 64.8% 48.3%, 65.6% 46.7%, 66.4% 47.6%, 67.2% 47.0%, 68.0% 44.8%, 68.8% 41.3%, 69.6% 40.4%, 70.4% 41.1%, 71.2% 43.2%, 72.0% 42.6%, 72.8% 43.6%, 73.6% 45.2%, 74.4% 45.0%, 75.2% 49.8%, 76.0% 51.9%, 76.8% 52.9%, 77.6% 53.4%, 78.4% 52.5%, 79.2% 52.1%, 80.0% 52.2%, 80.8% 50.8%, 81.6% 49.5%, 82.4% 49.4%, 83.2% 49.8%, 84.0% 50.4%, 84.8% 51.5%, 85.6% 53.0%, 86.4% 52.9%, 87.2% 50.4%, 88.0% 45.9%, 88.8% 42.5%, 89.6% 42.6%, 90.4% 44.1%, 91.2% 44.1%, 92.0% 43.4%, 92.8% 46.0%, 93.6% 45.6%, 94.4% 43.7%, 95.2% 43.7%, 96.0% 42.5%, 96.8% 42.1%, 97.6% 39.4%, 98.4% 35.8%, 99.2% 35.4%, 100.0% 35.2%, 100% 100%, 0% 100%);
}

:root[data-horizon="history"] .landscape__layer--near .landscape__surface {
  clip-path: polygon(0.0% 64.0%, 0.8% 62.4%, 1.6% 58.5%, 2.4% 56.1%, 3.2% 53.9%, 4.0% 50.5%, 4.8% 50.0%, 5.6% 49.5%, 6.4% 48.5%, 7.2% 47.1%, 8.0% 46.3%, 8.8% 46.4%, 9.6% 48.5%, 10.4% 48.9%, 11.2% 47.6%, 12.0% 47.9%, 12.8% 49.9%, 13.6% 50.3%, 14.4% 50.7%, 15.2% 51.3%, 16.0% 52.1%, 16.8% 52.6%, 17.6% 52.0%, 18.4% 53.6%, 19.2% 55.3%, 20.0% 55.6%, 20.8% 55.1%, 21.6% 53.7%, 22.4% 51.7%, 23.2% 49.1%, 24.0% 45.6%, 24.8% 45.6%, 25.6% 48.2%, 26.4% 49.3%, 27.2% 48.5%, 28.0% 48.6%, 28.8% 49.6%, 29.6% 49.8%, 30.4% 49.3%, 31.2% 49.0%, 32.0% 50.3%, 32.8% 51.0%, 33.6% 51.0%, 34.4% 53.2%, 35.2% 54.6%, 36.0% 54.4%, 36.8% 52.1%, 37.6% 52.7%, 38.4% 57.1%, 39.2% 59.5%, 40.0% 60.8%, 40.8% 61.2%, 41.6% 61.2%, 42.4% 61.0%, 43.2% 59.1%, 44.0% 58.9%, 44.8% 60.1%, 45.6% 59.2%, 46.4% 56.2%, 47.2% 52.4%, 48.0% 50.8%, 48.8% 48.8%, 49.6% 46.2%, 50.4% 43.6%, 51.2% 42.0%, 52.0% 43.8%, 52.8% 45.4%, 53.6% 47.0%, 54.4% 50.4%, 55.2% 51.7%, 56.0% 51.4%, 56.8% 50.0%, 57.6% 48.2%, 58.4% 48.3%, 59.2% 48.7%, 60.0% 50.4%, 60.8% 52.6%, 61.6% 53.4%, 62.4% 52.4%, 63.2% 50.2%, 64.0% 48.0%, 64.8% 47.5%, 65.6% 47.6%, 66.4% 48.9%, 67.2% 49.8%, 68.0% 50.2%, 68.8% 49.4%, 69.6% 48.5%, 70.4% 49.3%, 71.2% 51.5%, 72.0% 52.1%, 72.8% 51.2%, 73.6% 51.1%, 74.4% 51.7%, 75.2% 50.1%, 76.0% 48.0%, 76.8% 47.2%, 77.6% 45.0%, 78.4% 44.0%, 79.2% 45.9%, 80.0% 48.4%, 80.8% 50.5%, 81.6% 52.4%, 82.4% 54.3%, 83.2% 56.0%, 84.0% 57.0%, 84.8% 56.9%, 85.6% 56.3%, 86.4% 55.4%, 87.2% 54.8%, 88.0% 54.0%, 88.8% 51.3%, 89.6% 53.1%, 90.4% 53.5%, 91.2% 51.0%, 92.0% 49.8%, 92.8% 49.6%, 93.6% 51.5%, 94.4% 52.5%, 95.2% 53.2%, 96.0% 55.0%, 96.8% 55.6%, 97.6% 53.8%, 98.4% 50.1%, 99.2% 46.0%, 100.0% 44.7%, 100% 100%, 0% 100%);
}

:root[data-horizon="contact"] .landscape {
  --A: 70;
  --vs: 1;
  --sky-haze-at: 62;
  --haze: #38342f;
  --far: #3a3f45;
  --mid: #2e3237;
  --near: #23262a;
  --sky-top: #0d0d0c;
  --sky-mid: #1a1a1a;
  --glow: rgba(212, 174, 98, .09);
}

:root[data-horizon="contact"][data-theme="light"] .landscape {
  --A: 70;
  --vs: 1;
  --sky-haze-at: 62;
  --haze: #f1eeea;
  --far: #cfd4da;
  --mid: #b2b9c2;
  --near: #939ba5;
  --sky-top: #ffffff;
  --sky-mid: #f7f7f6;
  --glow: rgba(255, 240, 215, .4);
}

:root[data-horizon="contact"] .landscape__layer--far .landscape__surface {
  clip-path: polygon(0.0% 58.0%, 0.8% 58.0%, 1.6% 58.0%, 2.4% 58.0%, 3.2% 58.0%, 4.0% 57.9%, 4.8% 57.9%, 5.6% 57.8%, 6.4% 57.8%, 7.2% 57.7%, 8.0% 57.7%, 8.8% 57.6%, 9.6% 57.4%, 10.4% 57.2%, 11.2% 56.9%, 12.0% 56.6%, 12.8% 56.2%, 13.6% 55.9%, 14.4% 55.7%, 15.2% 55.6%, 16.0% 55.5%, 16.8% 55.2%, 17.6% 54.8%, 18.4% 54.4%, 19.2% 54.6%, 20.0% 54.8%, 20.8% 54.9%, 21.6% 54.9%, 22.4% 54.7%, 23.2% 54.3%, 24.0% 53.6%, 24.8% 52.7%, 25.6% 51.4%, 26.4% 51.8%, 27.2% 52.3%, 28.0% 52.6%, 28.8% 52.8%, 29.6% 52.8%, 30.4% 52.7%, 31.2% 52.6%, 32.0% 52.6%, 32.8% 52.5%, 33.6% 52.4%, 34.4% 52.2%, 35.2% 52.0%, 36.0% 51.6%, 36.8% 51.1%, 37.6% 50.6%, 38.4% 50.1%, 39.2% 50.4%, 40.0% 50.7%, 40.8% 50.9%, 41.6% 51.1%, 42.4% 51.2%, 43.2% 51.2%, 44.0% 51.2%, 44.8% 51.2%, 45.6% 51.1%, 46.4% 50.7%, 47.2% 50.0%, 48.0% 49.0%, 48.8% 47.6%, 49.6% 47.0%, 50.4% 47.1%, 51.2% 46.9%, 52.0% 46.2%, 52.8% 45.1%, 53.6% 43.6%, 54.4% 43.0%, 55.2% 42.9%, 56.0% 42.4%, 56.8% 43.4%, 57.6% 45.1%, 58.4% 46.4%, 59.2% 47.2%, 60.0% 47.7%, 60.8% 47.9%, 61.6% 47.7%, 62.4% 47.2%, 63.2% 46.3%, 64.0% 45.1%, 64.8% 44.1%, 65.6% 45.2%, 66.4% 46.0%, 67.2% 46.5%, 68.0% 46.6%, 68.8% 46.5%, 69.6% 46.4%, 70.4% 46.1%, 71.2% 45.9%, 72.0% 45.5%, 72.8% 45.1%, 73.6% 44.7%, 74.4% 44.3%, 75.2% 43.9%, 76.0% 43.5%, 76.8% 42.7%, 77.6% 41.5%, 78.4% 40.0%, 79.2% 40.6%, 80.0% 41.0%, 80.8% 41.7%, 81.6% 42.8%, 82.4% 43.7%, 83.2% 44.3%, 84.0% 44.7%, 84.8% 44.8%, 85.6% 44.8%, 86.4% 44.6%, 87.2% 44.3%, 88.0% 43.8%, 88.8% 43.5%, 89.6% 43.7%, 90.4% 44.2%, 91.2% 44.5%, 92.0% 44.6%, 92.8% 44.7%, 93.6% 44.8%, 94.4% 45.0%, 95.2% 45.4%, 96.0% 45.7%, 96.8% 45.8%, 97.6% 45.7%, 98.4% 45.4%, 99.2% 44.9%, 100.0% 44.3%, 100% 100%, 0% 100%);
}

:root[data-horizon="contact"] .landscape__layer--middle .landscape__surface {
  clip-path: polygon(0.0% 61.1%, 1.0% 61.2%, 2.0% 61.3%, 3.0% 61.5%, 4.0% 61.7%, 5.0% 62.0%, 6.0% 62.2%, 7.0% 62.4%, 8.0% 62.7%, 9.0% 62.9%, 10.0% 63.1%, 11.0% 63.3%, 12.0% 63.3%, 13.0% 63.2%, 14.0% 63.0%, 15.0% 62.8%, 16.0% 62.9%, 17.0% 63.0%, 18.0% 63.3%, 19.0% 63.6%, 20.0% 63.8%, 21.0% 64.0%, 22.0% 64.0%, 23.0% 63.9%, 24.0% 63.6%, 25.0% 63.2%, 26.0% 62.7%, 27.0% 62.2%, 28.0% 61.8%, 29.0% 61.4%, 30.0% 61.1%, 31.0% 60.8%, 32.0% 60.7%, 33.0% 60.8%, 34.0% 60.9%, 35.0% 61.2%, 36.0% 61.5%, 37.0% 61.8%, 38.0% 62.1%, 39.0% 62.3%, 40.0% 62.4%, 41.0% 62.5%, 42.0% 62.5%, 43.0% 62.6%, 44.0% 62.6%, 45.0% 62.6%, 46.0% 62.6%, 47.0% 62.4%, 48.0% 62.0%, 49.0% 61.5%, 50.0% 60.9%, 51.0% 60.2%, 52.0% 59.4%, 53.0% 58.6%, 54.0% 57.8%, 55.0% 57.1%, 56.0% 56.4%, 57.0% 55.7%, 58.0% 55.1%, 59.0% 54.6%, 60.0% 54.0%, 61.0% 53.5%, 62.0% 53.0%, 63.0% 52.6%, 64.0% 52.2%, 65.0% 52.0%, 66.0% 52.0%, 67.0% 52.2%, 68.0% 52.5%, 69.0% 52.8%, 70.0% 53.1%, 71.0% 53.5%, 72.0% 53.9%, 73.0% 54.4%, 74.0% 54.9%, 75.0% 55.3%, 76.0% 55.7%, 77.0% 56.0%, 78.0% 56.3%, 79.0% 56.5%, 80.0% 56.7%, 81.0% 56.8%, 82.0% 56.7%, 83.0% 56.5%, 84.0% 56.2%, 85.0% 56.0%, 86.0% 55.9%, 87.0% 55.9%, 88.0% 56.2%, 89.0% 56.5%, 90.0% 56.8%, 91.0% 57.1%, 92.0% 57.1%, 93.0% 57.1%, 94.0% 56.9%, 95.0% 56.7%, 96.0% 56.5%, 97.0% 56.4%, 98.0% 56.3%, 99.0% 56.2%, 100.0% 56.1%, 100% 100%, 0% 100%);
}

:root[data-horizon="contact"] .landscape__layer--near .landscape__surface {
  clip-path: polygon(0.0% 65.1%, 1.0% 65.0%, 2.0% 64.6%, 3.0% 64.0%, 4.0% 63.6%, 5.0% 63.3%, 6.0% 63.1%, 7.0% 62.8%, 8.0% 62.5%, 9.0% 62.2%, 10.0% 62.2%, 11.0% 62.3%, 12.0% 62.3%, 13.0% 62.3%, 14.0% 62.3%, 15.0% 62.4%, 16.0% 62.7%, 17.0% 62.9%, 18.0% 63.0%, 19.0% 63.1%, 20.0% 63.3%, 21.0% 63.8%, 22.0% 64.3%, 23.0% 64.7%, 24.0% 65.0%, 25.0% 65.2%, 26.0% 65.3%, 27.0% 65.3%, 28.0% 65.4%, 29.0% 65.7%, 30.0% 66.4%, 31.0% 66.9%, 32.0% 67.0%, 33.0% 67.0%, 34.0% 66.9%, 35.0% 66.7%, 36.0% 66.0%, 37.0% 65.1%, 38.0% 64.4%, 39.0% 64.0%, 40.0% 63.8%, 41.0% 63.6%, 42.0% 63.5%, 43.0% 63.7%, 44.0% 63.9%, 45.0% 64.0%, 46.0% 63.7%, 47.0% 63.3%, 48.0% 62.8%, 49.0% 62.5%, 50.0% 62.5%, 51.0% 62.5%, 52.0% 62.3%, 53.0% 61.9%, 54.0% 61.5%, 55.0% 61.2%, 56.0% 61.0%, 57.0% 61.0%, 58.0% 61.4%, 59.0% 62.1%, 60.0% 63.1%, 61.0% 64.3%, 62.0% 65.3%, 63.0% 66.0%, 64.0% 66.6%, 65.0% 67.1%, 66.0% 67.5%, 67.0% 67.7%, 68.0% 67.8%, 69.0% 67.9%, 70.0% 68.0%, 71.0% 68.0%, 72.0% 67.5%, 73.0% 66.9%, 74.0% 66.2%, 75.0% 65.5%, 76.0% 64.9%, 77.0% 64.3%, 78.0% 63.9%, 79.0% 63.5%, 80.0% 63.4%, 81.0% 63.2%, 82.0% 63.1%, 83.0% 62.9%, 84.0% 63.1%, 85.0% 63.5%, 86.0% 64.2%, 87.0% 64.6%, 88.0% 65.0%, 89.0% 65.2%, 90.0% 65.5%, 91.0% 65.7%, 92.0% 65.8%, 93.0% 65.8%, 94.0% 65.4%, 95.0% 64.8%, 96.0% 64.0%, 97.0% 63.5%, 98.0% 63.4%, 99.0% 63.6%, 100.0% 63.9%, 100% 100%, 0% 100%);
}


:root {
  --bg: #0e0e0d;
  --bg-2: #171716;
  --ink: #eceae5;
  --muted: rgba(236, 234, 229, .8);
  --faint: rgba(236, 234, 229, .16);
  --stroke: rgba(236, 234, 229, .14);
  --glass: rgba(14, 14, 13, .42);
  --panel-fade: rgba(14, 14, 13, .86);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f3f2ef;
  --ink: #171717;
  --muted: rgba(23, 23, 23, .8);
  --faint: rgba(23, 23, 23, .2);
  --stroke: rgba(23, 23, 23, .16);
  --glass: rgba(255, 255, 255, .55);
  --panel-fade: rgba(255, 255, 255, .9);
}

:root:not([data-theme="light"]) .v-panel p,
:root:not([data-theme="light"]) .manifesto__text,
:root:not([data-theme="light"]) .season p,
:root:not([data-theme="light"]) .about-block p {
  color: #e9e7e2;
}



.season p {
  color: var(--ink);
  opacity: .86;
  line-height: 1.7;
}

.season h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
}


.v-nav {
  gap: .05rem;
}

.v-nav button {
  min-height: 2.2rem;
  font-size: .98rem;
}

.v-desc {
  font-size: .96rem;
  line-height: 1.62;
  letter-spacing: 0.05em;
}

.v-specs div {
  padding: .55rem 0;
}

@media (max-height: 820px) and (min-width: 761px) {
  .v-wrap {
    padding-block: 5.6rem 1.6rem;
  }

  .v-name {
    font-size: clamp(2rem, 3.4vw, 3rem);
  }

  .v-latin {
    margin: .1rem 0 .6rem;
  }

  .v-desc {
    font-size: .88rem;
    line-height: 1.5;
  }

  .v-specs {
    margin-top: .8rem;
  }

  .v-specs div {
    padding: .35rem 0;
    grid-template-columns: 6rem 1fr;
  }

  .v-specs dt,
  .v-specs dd {
    font-size: .84rem;
  }

  .v-nav button {
    min-height: 1.9rem;
    font-size: .9rem;
  }
}

@media (max-width: 760px) {
  .v-desc {
    font-size: .9rem;
    line-height: 1.55;
  }

  .v-specs dt,
  .v-specs dd {
    font-size: .85rem;
  }
}


.page-hero h1 {
  font-size: clamp(2.8rem, 8.5vw, 8rem);
}

.form {
  max-width: 30rem;
  max-width: 30rem;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}




.v-wrap {
  touch-action: pan-y;
}

.v-nav {
  position: relative;
}

.v-navbar {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
}

.v-step,
.v-more {
  display: none;
}

.v-step,
.v-more {
  font-family: inherit;
  cursor: pointer;
}


.v-wrap {
  grid-template-columns: minmax(0, min(34rem, 42vw)) 1fr auto;
}

.v-panel {
  max-height: calc(100svh - 10.5rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.v-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


@media (max-height: 760px) {
  .v-panel {
    overflow-y: auto;
  }
}



@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .v-wrap {
    grid-template-columns: minmax(0, min(34rem, 42vw)) 1fr auto;
    grid-template-rows: auto 1fr;
    padding-block: 4.6rem .8rem;
    column-gap: 1rem;
  }

  .v-panels {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }

  .v-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .1rem;
    margin-top: 0;
  }

  .v-head {
    font-size: .8rem;
  }

  .v-panel {
    padding: .8rem 1rem;
    max-height: calc(100svh - 6.6rem);
  }

  .v-name {
    font-size: 1.7rem;
  }

  .v-latin {
    margin: 0 0 .4rem;
    font-size: .8rem;
    min-height: 0;
  }

  .v-desc {
    font-size: .78rem;
    line-height: 1.45;
  }

  .v-specs {
    margin-top: .5rem;
  }

  .v-specs div {
    padding: .25rem 0;
    grid-template-columns: 5rem 1fr;
    gap: .6rem;
  }

  .v-specs dt,
  .v-specs dd {
    font-size: .74rem;
  }

  .v-nav button {
    min-height: 1.6rem;
    font-size: .8rem;
  }
}

@media(max-width:760px) {
  .page-hero h1 {
    text-align: center;
}

}


@media (max-aspect-ratio: 1/1),
(max-width: 760px) and (min-height: 501px) {
  .v-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: .5rem;
    padding-block: 5.2rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  }

  .v-head {
    font-size: .78rem;
    line-height: 1.35;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 2rem;
  }


  .v-panels {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding-top: 0;
  }

  .v-panel {
    max-width: none;
    max-height: min(58svh, 30rem);
    overflow: hidden;
    padding: .95rem 1.1rem 1rem;
    border-radius: 1.1rem;
  }

  .v-panel.is-open {
    overflow-y: auto;
  }

  .v-name {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem);
    line-height: 1.12;
  }

  .v-latin {
    margin: .1rem 0 .55rem;
    min-height: 0;
    font-size: .84rem;
    line-height: 1.35;
  }

  .v-desc {
    max-width: none;
    font-size: .9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .v-panel.is-open .v-desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .v-more {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    margin-top: .1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: .88rem;
    letter-spacing: .01em;
  }

  .v-specs {
    display: none;
    margin-top: .45rem;
    max-width: none;
  }

  .v-panel.is-open .v-specs {
    display: grid;
  }

  .v-specs div {
    grid-template-columns: 5.4rem minmax(0, 1fr);
    gap: .8rem;
    padding: .45rem 0;
  }

  .v-specs dt,
  .v-specs dd {
    font-size: .82rem;
    line-height: 1.4;
  }


  .v-navbar {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: .6rem;
  }

  .v-step {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid var(--faint);
    border-radius: 50%;
    background: var(--glass);
    color: var(--ink);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .v-step svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .v-step:disabled {
    opacity: .3;
    cursor: default;
  }

  .v-nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .4rem;
    margin: 0;
    padding: .2rem .15rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%);
  }

  .v-nav::-webkit-scrollbar {
    display: none;
  }

  .v-nav li {
    flex: none;
    scroll-snap-align: center;
  }

  .v-nav button {
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--faint);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: .92rem;
    white-space: nowrap;
    text-shadow: none;
  }

  .v-nav button[aria-current="true"] {
    color: var(--ink);
    border-color: var(--accent);
  }

  .v-slot {
    display: none;
  }


  :root[data-horizon="varieties"] .totop {
    display: none;
  }
}


.h-stage {

  height: auto;
  min-height: calc(100svh * 5.5);
  overflow: visible;
  padding-block: 0;
}

.h-wrap {
  position: relative;
  padding-block: 6.5rem 3rem;
}

.h-panel {
  max-width: min(45rem, 100%);
  overflow: visible;
  background: var(--glass);
  border: 1px solid var(--faint);
  border-radius: 1.4rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.h-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.h-panel.is-open {
  overflow-y: auto;
}

.h-panel h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.1;
  margin-bottom: .9rem;
}

.h-lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
}

.h-panel.is-open .h-lead {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.h-more {
  display: none;
  align-items: center;
  min-height: 2.4rem;
  margin-top: .25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: .9rem;
  letter-spacing: .01em;
  cursor: pointer;
}

@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .h-wrap {
    padding-block: 4.6rem .8rem;
  }



  .h-panel h1 {
    /* font-size: 1.7rem; */
    margin-bottom: .4rem;
  }

  /* .h-lead {
    font-size: .78rem;
    line-height: 1.45;
  } */
}

@media (max-aspect-ratio: 1/1), (max-width: 760px) and (min-height: 501px) {
  .h-stage {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .h-wrap {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding-block: 5.2rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  }

  .h-panel {
    align-self: end;
    max-width: none;
    max-height: min(58svh, 30rem);
    overflow: hidden;
    padding: .95rem 1.1rem 1rem;
    border-radius: 1.1rem;
  }

  .h-panel h1 {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem);
    line-height: 1.12;
    margin-bottom: .5rem;
  }

  .h-lead {
    font-size: 1rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .h-more {
    display: inline-flex;
    font-size: .88rem;
  }


  :root[data-hstage] .totop {
    display: none;
  }
}


.loader__stage {
  width: min(58vw, 17rem);
  aspect-ratio: 2 / 3;
  color: var(--ink);
}

.loader__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-height: 520px) {
  .loader__stage {
    width: min(30vh, 11rem);
  }
}


.sound-btn {
  position: fixed;
  z-index: 10;
  left: var(--pad);
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* background: var(--panel-fade); */
  /* background: var(--glass); */
  background: rgba(10, 9, 8, .82);
  box-shadow: 0 0 0 1px rgba(244, 242, 237, .12), 0 8px 26px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  transition: color .4s, box-shadow .4s, bottom .8s cubic-bezier(.22, 1, .36, 1), left .8s cubic-bezier(.22, 1, .36, 1), width .6s ease, height .6s ease;   /* bottom/left/size animate, so the button glides when it moves (mobile: varieties/history) */
}

.sound-btn:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 26px rgba(0, 0, 0, .45);
}

.sound-btn.is-on {
  color: var(--accent);
}

.sound-btn__wave {
  width: 1.9rem;
  height: .95rem;
  overflow: visible;
  opacity: .55;
  transition: opacity .4s;
}

.sound-btn.is-on .sound-btn__wave {
  opacity: 1;
}

.sound-btn__wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sound-btn__amp {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: sndAmp 1.7s ease-in-out infinite;
}

.sound-btn__flow {
  animation: sndFlow 1.6s linear infinite;
}

.sound-btn:not(.is-on) .sound-btn__amp,
.sound-btn:not(.is-on) .sound-btn__flow {
  animation-play-state: paused;
}

@keyframes sndFlow {
  to {
    transform: translateX(-90.5px);
  }
}

@keyframes sndAmp {
  0%, 100% {
    transform: scaleY(.55);
  }

  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-btn {
    transition: none;
  }

  .sound-btn__amp,
  .sound-btn__flow {
    animation: none;
  }
}


@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  :root[data-horizon="varieties"][data-vstage] .sound-btn,
  :root[data-horizon="history"][data-hstage] .sound-btn {
    bottom: calc(60% - 2.75rem);   
    left: .75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}


@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .v-navbar {
    min-width: 13.5rem;
    padding: .8rem 1.2rem;
    background: var(--glass);
    border: 1px solid var(--faint);
    border-radius: 1.2rem;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}