:root[data-design="2"] {
  --nav-bg: rgba(12, 11, 10, .66);
  --nav-veil: rgba(10, 9, 8, .58);
  --scrim-a: rgba(10, 9, 8, .74);
  --scrim-b: rgba(10, 9, 8, .38);
  --edge-v: rgba(0, 0, 0, .34);
}

:root[data-design="2"][data-theme="light"] {
  --nav-bg: rgba(255, 255, 255, .72);
  --nav-veil: rgba(255, 255, 255, .78);
  --scrim-a: rgba(255, 255, 255, .84);
  --scrim-b: rgba(255, 255, 255, .42);
  --edge-v: rgba(255, 255, 255, 0);
}


:root[data-design="2"] .dw {
  display: inline-block;
}

:root[data-design="2"] .dc {
  display: inline-block;
}


:root[data-design="2"] .dm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .08em 0 .2em;
  margin: -.08em 0 -.2em;
}

:root[data-design="2"] .dm > span {
  display: inline-block;
}


@media (min-width: 761px) and (min-aspect-ratio: 1/1) {

  :root[data-design="2"] .h-panel h1 .dw:last-child .dc {
    color: var(--accent);
  }


  :root[data-design="2"] .h-rail {
    position: fixed;
    z-index: 4;
    right: calc(var(--pad) + .25rem);
    top: 50%;
    height: min(46vh, 30rem);
    width: 1px;
    transform: translateY(-50%);
    background: var(--faint);
    opacity: 0;
    transition: opacity .6s;
    pointer-events: none;
  }

  :root[data-design="2"][data-hstage] .h-rail,
  :root[data-design="2"][data-hstage] .h-count {
    opacity: 1;
  }

  :root[data-design="2"] .h-rail__fill {
    position: absolute;
    left: -0.5px;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--accent);
  }

  :root[data-design="2"] .h-rail i {
    position: absolute;
    right: -5px;
    width: 11px;
    height: 11px;
    margin-top: -5px;
    border-radius: 50%;
    border: 1px solid var(--faint);
    background: var(--bg);
    transition: background-color .4s, border-color .4s, box-shadow .4s;
  }

  :root[data-design="2"] .h-rail i.on {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 7px var(--faint);
  }

  :root[data-design="2"] .h-count {
    position: fixed;
    z-index: 4;
    right: calc(var(--pad) + .25rem);
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
    font-family: var(--f-display);
    font-size: 1.9rem;
    font-weight: 300;
    letter-spacing: .04em;
    opacity: 0;
    transition: opacity .6s;
    pointer-events: none;
  }

  :root[data-design="2"] .h-count span {
    margin-left: .4rem;
    font-size: 1.1rem;
    opacity: .45;
  }
}


@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  :root[data-design="2"] .h-rail,
  :root[data-design="2"] .h-count {
    display: none;
  }
}




:root[data-theme-lock] #themeBtn {
  display: none;
}


:root[data-design="2"] {
  --glass: transparent;
  --tshadow: none;
}

:root[data-design="2"] *:not(.menu):not(.menu *) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


:root[data-design="2"] * {
  text-shadow: none !important;
}


:root[data-design="2"] .nav {
  border-color: transparent;
  box-shadow: none;
}

:root[data-design="2"] .nav::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  top: -3rem;
  bottom: -2.6rem;
  background: linear-gradient(180deg, rgba(7, 6, 5, .8) 0, rgba(7, 6, 5, .8) 5rem, rgba(7, 6, 5, 0) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}

:root[data-design="2"][data-nav-veil] .nav::before {
  opacity: 1;
}


:root[data-design="2"] :is(.manifesto__text, .v-panel, .h-panel, .about-block, .season, .form, .contact__info, .v-navbar, .page-hero p) {
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}


:root[data-design="2"] :is(.v-panel, .h-panel) {
  box-shadow: inset 1px 0 0 var(--stroke);
}

:root[data-design="2"] :is(.about-block, .season) {
  box-shadow: inset 0 1px 0 var(--stroke);
}


:root[data-design="2"] .vignette {
  background:
    linear-gradient(90deg, rgba(6, 5, 4, .66) 0%, rgba(6, 5, 4, .34) 32%, rgba(6, 5, 4, 0) 62%),
    linear-gradient(0deg, rgba(6, 5, 4, .40) 0%, rgba(6, 5, 4, 0) 34%),
    radial-gradient(ellipse 95% 95% at 60% 46%, transparent 55%, rgba(0, 0, 0, .40) 100%);
}

@media (min-width: 761px) and (min-aspect-ratio: 1/1) {
  :root[data-design="2"][data-horizon="varieties"] .vignette {
    background:
      linear-gradient(90deg, rgba(6, 5, 4, .66) 0%, rgba(6, 5, 4, .34) 32%, rgba(6, 5, 4, 0) 62%),
      linear-gradient(270deg, rgba(6, 5, 4, .55) 0%, rgba(6, 5, 4, 0) 26%),
      linear-gradient(0deg, rgba(6, 5, 4, .40) 0%, rgba(6, 5, 4, 0) 34%),
      radial-gradient(ellipse 95% 95% at 60% 46%, transparent 55%, rgba(0, 0, 0, .40) 100%);
  }
}

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  :root[data-design="2"] .vignette {
    background:
      linear-gradient(0deg, rgba(6, 5, 4, .66) 0%, rgba(6, 5, 4, .30) 38%, rgba(6, 5, 4, 0) 66%),
      radial-gradient(ellipse 120% 95% at 50% 46%, transparent 55%, rgba(0, 0, 0, .40) 100%);
  }
}


:root[data-design="2"] .marquee__track {
  animation-duration: 170s;
}

:root[data-design="2"] .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}


:root[data-design="2"] .btn {
  transition: color .45s var(--ease), box-shadow .6s ease;
}

:root[data-design="2"] .btn::before {
  background: radial-gradient(circle 10rem at var(--mx, 50%) var(--my, 50%), rgba(255, 245, 222, .96), rgba(255, 238, 205, 0) 72%);
  transform: none;
  opacity: 0;
  transition: opacity .5s ease;
}

:root[data-design="2"] .btn:hover::before {
  opacity: 1;
}

:root[data-design="2"] .btn:hover {
  box-shadow: 0 14px 44px -12px rgba(213, 174, 104, .65);
}

:root[data-design="2"] .btn__t {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.45;
  vertical-align: middle;
}

:root[data-design="2"] .btn__t > span {
  display: block;
  transition: transform .6s var(--ease);
}

:root[data-design="2"] .btn__t > span:last-child {
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
}

:root[data-design="2"] .btn:hover .btn__t > span,
:root[data-design="2"] .btn:focus-visible .btn__t > span {
  transform: translateY(-100%);
}


:root[data-design="2"] .icon-btn,
:root[data-design="2"] .menu-btn {
  transition: background-color .3s, box-shadow .5s ease;
}

:root[data-design="2"] .icon-btn:hover,
:root[data-design="2"] .menu-btn:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 26px -6px rgba(213, 174, 104, .55);
}


:root[data-design="2"] :is(.v-more, .h-more) {
  background: linear-gradient(currentColor, currentColor) left calc(100% - .35rem) / 0 1px no-repeat;
  transition: background-size .55s var(--ease), color .3s;
}

:root[data-design="2"] :is(.v-more, .h-more):hover {
  background-size: 100% 1px;
}


:root[data-atmo="warm"][data-horizon="varieties"]:not([data-theme="light"]) .landscape {
  --haze: #28221d;
}

:root[data-atmo="warm"][data-horizon="history"]:not([data-theme="light"]) .landscape {
  --haze: #3a3228;
}

:root[data-atmo="warm"][data-horizon="contact"]:not([data-theme="light"]) .landscape {
  --haze: #3d342a;
}