/* USPEH88 | BASE
   One selector per block. Section content is in index.html.
   Responsive rules follow the original cascade order. */

:root {
  --bg: #07090a;
  --ink: #f2f3f1;
  --muted: #969b9b;
  --line: rgba(255,255,255,.13);
  --teal: #2e8d89;
  --wine: #712d3d;
  --plum: #5a355f;
  --slate: #26363c;
  --pad: clamp(22px,5vw,76px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope,system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:root {
  --bg: #06090b;
  --muted: #acb7b8;
  --teal: #72c8c2;
  --pad: clamp(24px,5.8vw,100px);
}

html {
  scroll-padding-top: 100px;
}

body {
  background: #06090b;
}

::selection {
  background: #76c9c2;
  color: #071213;
}

a: focus-visible {
  outline: 2px solid #8ce3d8;
  outline-offset: 7px;
}

button: focus-visible {
  outline: 2px solid #8ce3d8;
  outline-offset: 7px;
}

[tabindex]:focus-visible {
  outline: 2px solid #8ce3d8;
  outline-offset: 7px;
}

.reveal {
  transition-duration: .8s;
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none!important;
    scroll-behavior: auto!important;
    transition-duration: .001s!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  *:before {
    animation: none!important;
    scroll-behavior: auto!important;
    transition-duration: .001s!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  *:after {
    animation: none!important;
    scroll-behavior: auto!important;
    transition-duration: .001s!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}