:root {
  --solace-paper: #efeee5;
  --solace-ink: #28322a;
  --solace-bronze: #b88a52;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body,
#root { max-width: 100%; overflow-x: clip; }

html[data-sly-transition='out'] .solace-palette-veil { opacity: 0; }

.solace-palette-veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(circle at 9% 8%, color-mix(in srgb, var(--sly-signal) 24%, transparent), transparent 33rem),
    radial-gradient(circle at 92% 38%, color-mix(in srgb, var(--sly-accent) 20%, transparent), transparent 38rem);
  mix-blend-mode: color;
  transition: opacity .9s ease, background 1.2s ease;
}

html[data-sly-mood] body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sly-deep), var(--sly-accent), var(--sly-signal));
}

#root a:focus-visible,
#root button:focus-visible,
.solace-operations-proof a:focus-visible,
.solace-cody-footer a:focus-visible {
  outline: 3px solid var(--sly-signal);
  outline-offset: 4px;
}

.solace-operations-proof {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  padding: clamp(4.5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 6rem);
  color: #f5f1e8;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sly-deep) 86%, #171711), #171711 62%),
    #171711;
  isolation: isolate;
}

.solace-operations-proof::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto 38%;
  height: 34rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sly-accent) 38%, transparent);
  box-shadow: 0 0 9rem color-mix(in srgb, var(--sly-signal) 18%, transparent);
  transform: rotate(-13deg);
  z-index: -1;
}

.solace-operations-intro > p {
  margin: 0 0 1.75rem;
  color: color-mix(in srgb, var(--sly-accent) 70%, #fff);
  font: 500 .72rem/1.4 "Solace Sans", sans-serif;
  letter-spacing: .2em;
}

.solace-operations-intro h2 {
  margin: 0;
  max-width: 12ch;
  font: 400 clamp(3rem, 6vw, 6.8rem)/.88 "Solace Serif", Georgia, serif;
  letter-spacing: -.055em;
}

.solace-operations-intro h2 em {
  color: color-mix(in srgb, var(--sly-accent) 55%, #e5dec7);
  font-weight: 400;
}

.solace-operations-intro > span {
  display: block;
  max-width: 45rem;
  margin-top: 2.2rem;
  color: #d6d1c6;
  font: 400 1rem/1.75 "Solace Sans", sans-serif;
}

.solace-operations-intro > a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
  padding: .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--sly-accent) 55%, #fff 12%);
  color: #fff;
  text-decoration: none;
  font: 500 .76rem/1 "Solace Sans", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.solace-operations-intro > a:hover {
  color: #111;
  background: color-mix(in srgb, var(--sly-accent) 78%, #fff);
  transform: translateY(-2px);
}

.solace-operations-proof ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ffffff2b;
}

.solace-operations-proof li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid #ffffff2b;
}

.solace-operations-proof li > b {
  color: color-mix(in srgb, var(--sly-signal) 62%, #fff);
  font: 500 .72rem/1.5 "Solace Sans", sans-serif;
}

.solace-operations-proof li > span {
  font: 500 1rem/1.35 "Solace Sans", sans-serif;
}

.solace-operations-proof li small {
  display: block;
  margin-top: .3rem;
  color: #aaa69d;
  font: 400 .8rem/1.5 "Solace Sans", sans-serif;
}

.solace-operations-truth {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid #ffffff2b;
  color: #aaa69d;
  font: 400 .78rem/1.6 "Solace Sans", sans-serif;
}

.solace-operations-truth b { color: #f5f1e8; }

#root footer[hidden] { display: none !important; }

.solace-cody-footer {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 1fr) minmax(18rem, 1fr);
  align-items: end;
  gap: 2rem;
  padding: 2.5rem clamp(1.25rem, 5vw, 6rem);
  color: var(--solace-ink);
  background: color-mix(in srgb, var(--solace-paper) 93%, var(--sly-accent));
  border-top: 1px solid color-mix(in srgb, var(--sly-accent) 28%, #9c988d);
}

.solace-footer-mark {
  color: inherit;
  text-decoration: none;
  font: 400 clamp(2rem, 4vw, 3.8rem)/1 "Solace Serif", Georgia, serif;
}

.solace-footer-mark sup { font-size: .35em; }

.solace-cody-footer p {
  margin: 0;
  font: 400 .84rem/1.55 "Solace Sans", sans-serif;
  letter-spacing: .08em;
}

.solace-cody-footer p b { letter-spacing: .16em; }

.solace-cody-footer nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .7rem 1.25rem;
}

.solace-cody-footer nav a {
  color: inherit;
  text-underline-offset: .35rem;
  font: 500 .78rem/1.4 "Solace Sans", sans-serif;
}

@media (max-width: 760px) {
  .site-header {
    width: 100%;
    min-width: 0;
    gap: .75rem !important;
    padding-inline: 1rem !important;
    overflow: hidden;
  }
  .site-header .wordmark { flex: 0 0 auto; font-size: 2.4rem !important; }
  .site-header nav {
    min-width: 0;
    margin-left: auto;
    gap: .5rem !important;
  }
  .site-header nav .nav-cta {
    gap: .25rem !important;
    white-space: nowrap;
    font-size: .74rem !important;
  }
  .site-header nav .nav-cta svg { width: .9rem; height: .9rem; }
  .solace-operations-proof { grid-template-columns: 1fr; }
  .solace-operations-proof::before { inset: -8rem -18rem auto 8%; }
  .solace-operations-intro h2 { font-size: clamp(3.15rem, 15vw, 5.2rem); }
  .solace-cody-footer { grid-template-columns: 1fr; align-items: start; }
  .solace-cody-footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .solace-palette-veil, .solace-operations-intro > a { transition: none; }
  .solace-operations-intro > a:hover { transform: none; }
}
