:root {
  --coffee-page-background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),linear-gradient(170deg,#f2e6d0 0%,#e8d8be 30%,#ddd0b8 50%,#e5d5bf 70%,#f0e4d0 100%);
  font-family: Manrope,Arial,sans-serif;
  color: #242424;
  background: #f4ecdf;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

* {
  box-sizing: border-box
}

html,body {
  margin: 0;
  min-width: 280px
}

body {
  font-size: 16px;
  line-height: 1.7
}

a {
  -webkit-tap-highlight-color: transparent
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}

.coffee-home {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
  background: var(--coffee-page-background)
}

.coffee-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: #8a7058
}

.coffee-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 15%,#d2af7840 0%,transparent 55%),radial-gradient(ellipse 70% 55% at 80% 80%,#b48c5a33 0%,transparent 50%),radial-gradient(ellipse 50% 50% at 50% 50%,#c8a5641a 0%,transparent 60%);
  animation: warm-light 10s ease-in-out infinite alternate
}

.coffee-background::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url('../assets/images/coffee-pattern.svg');
  background-size: 80px 80px
}

.coffee-bean {
  position: absolute;
  display: block;
  transform: rotate(var(--rotation));
  opacity: var(--opacity)
}

.coffee-bean svg {
  display: block;
  width: 100%;
  height: 100%
}

.coffee-bean--floating {
  animation: floating-bean var(--duration) ease-in-out var(--delay) infinite
}

.coffee-orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,#b4a08226,transparent 70%);
  animation: floating-orb var(--duration) ease-in-out var(--delay) infinite
}

.explore-hint {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  color: #242424;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .35em;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 20px;
  opacity: .7
}

.brand-clock {
  --clock-size: min(620px,calc(100vw - 40px),calc(100svh - 200px));
  position: relative;
  flex-shrink: 0;
  width: var(--clock-size);
  aspect-ratio: 1;
  container-type: inline-size
}

.dial-face,.dial-hands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none
}

.dial-face {
  z-index: 0
}

.dial-hands {
  z-index: 4
}

.dial-branding {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: appear .5s ease-out 1.2s both
}

.dial-title {
  position: absolute;
  top: 46.4%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: 'Playfair Display',Georgia,serif;
  font-size: 3.8cqw;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  color: #3a2e1e;
  text-shadow: .3px .6px #0000001f
}

.dial-ornament {
  position: absolute;
  left: 43%;
  top: 50%;
  width: 14%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #503c1e4d
}

.dial-ornament i {
  display: block;
  width: 43%;
  height: .5px;
  background: #503c1e40
}

.dial-ornament b {
  font-size: 1cqw;
  font-weight: 400;
  line-height: 1
}

.dial-subtitle {
  position: absolute;
  top: 52.2%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.2cqw;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .24em;
  white-space: nowrap;
  color: #503c1e66
}

.dial-brands {
  position: absolute;
  inset: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 3
}

.dial-brands li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14%;
  height: 14%;
  transform: translate(-50%,-50%);
  animation: appear .6s cubic-bezier(.22,1,.36,1) calc(.6s + var(--index)*.08s) both
}

.brand-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #3a2e1e;
  text-decoration: none;
  outline: none;
  transition: transform .2s ease-out;
  transform-origin: center center;
  touch-action: manipulation
}

.brand-link img {
  position: absolute;
  left: 50%;
  top: 26.7857%;
  transform: translate(-50%,-50%);
  width: 40.8571%;
  height: auto;
  aspect-ratio: 1;
  object-fit: fill;
  border-radius: 50%;
  outline: .6px solid #a0886040;
  outline-offset: .5px;
  pointer-events: none
}

.brand-name {
  position: absolute;
  left: 50%;
  top: 60.2143%;
  transform: translate(-50%,-50%);
  font-size: 2cqw;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap
}

.brand-name::after {
  content: '';
  position: absolute;
  bottom: -.5em;
  left: 15%;
  width: 70%;
  height: 1px;
  background: #503c1e59;
  transform: scaleX(0);
  transition: transform .2s
}

.brand-link:focus-visible {
  outline: 1.5px solid #3d7874;
  border-radius: 50%;
  outline-offset: 1px;
  transform: scale(1.12)
}

.is-swept .brand-link {
  transform: scale(1.28)
}

.is-swept .brand-name::after,.brand-link:focus-visible .brand-name::after {
  transform: scaleX(1)
}

@media(hover:hover) {
  .brand-link:hover {
    transform: scale(1.28)
  }
  .brand-link:hover .brand-name::after {
    transform: scaleX(1)
  }
  .brand-link:hover img {
    box-shadow: 0 2px 6px #00000026
  }
}

.dial-readout {
  position: absolute;
  left: 50%;
  top: 67.1%;
  transform: translate(-50%,-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25cqw;
  pointer-events: none;
  animation: appear .4s ease-out 1.5s both
}

.dial-readout time {
  font-size: 2.2cqw;
  line-height: 1;
  font-weight: 600;
  color: #3c2d1980;
  white-space: nowrap
}

.dial-readout>span {
  position: absolute;
  top: 3.15cqw;
  font-size: 1.1cqw;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .25em;
  color: #3c2d1959
}

.main-navigation {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
  flex-shrink: 0;
  line-height: 1.7;
  height: 27.2px
}

.main-navigation a {
  position: relative;
  color: #242424;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .15em;
  padding: 8px 0;
  line-height: 1.7
}

.main-navigation a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .25s
}

.main-navigation a:hover::after,.main-navigation a:focus-visible::after {
  transform: scaleX(1)
}

.main-navigation a:focus-visible {
  outline: 1.5px solid #3d7874;
  outline-offset: 5px;
  border-radius: 1px
}

.no-script {
  font-size: .8rem;
  position: relative;
  z-index: 5;
  text-align: center
}

@keyframes appear {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes warm-light {
  0%,100% {
    opacity: .7;
    transform: scale(1)
  }
  50% {
    opacity: 1;
    transform: scale(1.01)
  }
}

@keyframes floating-bean {
  0%,100% {
    opacity: 0;
    transform: translateY(0) rotate(var(--rotation)) scale(.65)
  }
  12%,88% {
    opacity: .22
  }
  50% {
    opacity: .15;
    transform: translateY(-22px) rotate(var(--rotation)) scale(.9)
  }
}

@keyframes floating-orb {
  0%,100% {
    opacity: 0;
    transform: scale(.8)
  }
  25% {
    opacity: .5;
    transform: scale(1.1) translate(10px,-12px)
  }
  50% {
    opacity: .35;
    transform: scale(.95) translate(-8px,8px)
  }
  75% {
    opacity: .55;
    transform: scale(1.05) translate(8px,5px)
  }
}

@media(max-width:768px) {
  .coffee-home {
    padding: 24px 16px
  }
  .brand-clock {
    --clock-size: min(620px,calc(100vw - 32px),calc(100svh - 200px))
  }
  .main-navigation {
    gap: 20px;
    margin-top: 16px
  }
  .main-navigation a {
    font-size: .75rem
  }
}

@media(max-width:480px) {
  .coffee-home {
    padding: 16px 10px
  }
  .brand-clock {
    --clock-size: min(620px,calc(100vw - 20px),calc(100svh - 160px))
  }
  .explore-hint {
    font-size: .65rem;
    margin-bottom: 12px
  }
  .main-navigation {
    gap: 14px;
    margin-top: 12px
  }
  .main-navigation a {
    min-height: 44px;
    display: flex;
    align-items: center
  }
}

@media(max-height:480px) and (min-width:600px) {
  .coffee-home {
    padding: 16px
  }
  .brand-clock {
    --clock-size: min(620px,calc(100vw - 32px),calc(100svh - 130px))
  }
  .explore-hint {
    font-size: .65rem;
    margin-bottom: 8px
  }
  .main-navigation {
    margin-top: 8px;
    gap: 24px
  }
  .main-navigation a {
    font-size: .7rem
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none!important;
    transition: none!important
  }
  .coffee-bean--floating {
    opacity: .1
  }
  .coffee-orb {
    opacity: .25
  }
  .is-swept .brand-link {
    transform: none
  }
}

/* Crescent wordmark retains its transparent background on the clock face. */
.dial-moonbow-logo{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:29%;height:auto;display:block}