/* The original family artwork is preserved; transparency belongs to the backdrop. */
:root {
  --family-autumn-art: url('/static/algonquin-autumn.png');
}

.auth-shell,
.shell.home-view .main-wrap {
  position: relative;
  isolation: isolate;
  background: #f5f3e9;
}

.auth-shell::before,
.home-view .main-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--family-autumn-art);
  background-size: auto 255%;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: .2;
}

.home-view .main-wrap::before {
  left: 236px;
}

.auth-art {
  isolation: isolate;
  background: #1c3c31;
}

.auth-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Frame the landscape below the artwork's lettering, without changing the file. */
  background: var(--family-autumn-art) center bottom / auto 255% no-repeat;
  opacity: .64;
}

.auth-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #173a30a6, #173a308a 55%, #132e25c9);
}

.auth-art .brand,
.auth-art .art-copy,
.auth-art footer {
  position: relative;
  z-index: 1;
}

.auth-art .art-copy {
  padding: 36px 0;
}

.auth-art .art-copy .eyebrow {
  color: #dce8b4;
}

.auth-art .art-copy p,
.auth-art .brand span.small,
.auth-art footer {
  color: #ecf1e5;
}

.auth-art .art-rings {
  display: none;
}

.auth-form-side {
  background: transparent;
}

.auth-form-wrap {
  width: min(100%, 474px);
  padding: 32px;
  background: #fffffcf0;
  border: 1px solid #ffffffd9;
  border-radius: 24px;
  box-shadow: 0 20px 65px #483e2714;
}

.auth-form-wrap .clock-card,
.home-view .clock-card,
.home-view .stat,
.home-view .panel {
  background: #fffffcf0;
  border-color: #e2e3d8;
}

.auth-form-wrap .clock-card:last-child,
.home-view .clock-card:last-child {
  background: #f6f7eff2;
}

.home-view .topbar {
  background: #fcfdf9eb;
}

.home-view .hero {
  background-image: linear-gradient(90deg, #183d33f2, #183d33b8), var(--family-autumn-art);
  background-position: center, center bottom;
  background-size: cover, max(100%, 440px) auto;
  background-repeat: no-repeat;
  border: 1px solid #355546;
  box-shadow: 0 8px 26px #183d3312;
}

.home-view .hero::after {
  display: none;
}

.home-view .page-head p {
  color: #526553;
}

@supports (backdrop-filter: blur(6px)) {
  .auth-form-wrap {
    background: #fffffce8;
    backdrop-filter: blur(10px);
  }

  .home-view .clock-card,
  .home-view .stat,
  .home-view .panel {
    backdrop-filter: blur(6px);
  }
}

@media (max-width: 1100px) {
  .home-view .main-wrap::before { left: 205px; }
  .auth-form-side { padding: 35px 22px; }
  .auth-form-wrap { padding: 26px; }
}

@media (max-width: 760px) {
  .home-view .main-wrap::before { left: 0; }
  .auth-shell::before { opacity: .28; }
  .auth-form-side { padding: 28px 16px; }
  .auth-form-wrap { padding: 24px 18px; border-radius: 20px; }
  .auth-mobile-brand { margin-bottom: 26px; }
}

@media (prefers-reduced-transparency: reduce) {
  .auth-form-wrap,
  .home-view .clock-card,
  .home-view .stat,
  .home-view .panel { background: #fffffc; backdrop-filter: none; }
}