:root {
  --brand-red: #e63d35;
  --brand-gold: #f4c542;
  --ink: #0b0b0d;
  --surface: #151517
}

html {
  scroll-padding-top: 112px
}

body {
  background: #0b0b0d;
  color: #fff
}

.reveal-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none
}

.shine {
  position: relative;
  overflow: hidden
}

.shine:after {
  content: '';
  position: absolute;
  inset: -100% auto -100% -50%;
  width: 35%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transition: left .65s ease
}

.shine:hover:after {
  left: 120%
}

@media(max-width:640px) {

  h1,
  h2,
  h3 {
    overflow-wrap: anywhere
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important
  }

  .reveal-on .reveal {
    opacity: 1;
    transform: none
  }
}

html,
body {
  max-width: 100%;
  overflow-x: clip
}

*,
*::before,
*::after {
  box-sizing: border-box
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto
}

table {
  max-width: 100%
}

section,
header,
main,
footer,
div,
article,
aside,
nav {
  min-width: 0
}

@media (max-width:767px) {
  body {
    overflow-x: clip
  }

  main,
  section {
    max-width: 100vw
  }

  [class*="grid-cols-"],
  [class*="flex"] {
    min-width: 0
  }

  h1,
  h2,
  h3,
  p,
  a,
  span,
  li,
  td,
  th {
    overflow-wrap: anywhere;
    word-break: normal
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word
  }

  .overflow-x-auto {
    max-width: 100vw
  }
}

@media (min-width:1024px) {
  section>.mx-auto>.grid>div:first-child>.lg\:sticky {
    position: sticky;
    top: 7.5rem;
    align-self: flex-start;
  }
}