:root {
  color-scheme: dark;
  --stone: #090a0b;
  --cream: #ebe7df;
  --dim: #aaa49a;
  --copper: #df9048;
  --line: rgba(235, 231, 223, .12);
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --editorial: "Newsreader", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--stone); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(223, 144, 72, .34); }

.teaser { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.art { position: absolute; z-index: -4; inset: 0; background: url("/underboss-wireframe-army-v5.jpg") 57% center / cover no-repeat; transform: scale(1.01); animation: settle 2.2s cubic-bezier(.22, 1, .36, 1) both; }
.shade { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(6, 7, 8, .99) 0%, rgba(6, 7, 8, .93) 23%, rgba(6, 7, 8, .56) 47%, rgba(6, 7, 8, .08) 72%), linear-gradient(180deg, rgba(6, 7, 8, .48), transparent 24%, transparent 69%, rgba(6, 7, 8, .76)); }
.grain { position: absolute; z-index: -2; inset: 0; opacity: .025; pointer-events: none; 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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

header { position: absolute; z-index: 2; top: 0; left: clamp(22px, 4vw, 64px); right: clamp(22px, 4vw, 64px); height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); animation: appear .9s .15s ease both; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { display: block; border-radius: 50%; }
.brand > span { display: flex; flex-direction: column; gap: 3px; }
.brand strong { font-size: 11px; line-height: 1; letter-spacing: .2em; }
.brand small { color: var(--dim); font: 600 7px/1 var(--mono); letter-spacing: .15em; }
header > p { margin: 0; color: rgba(235, 231, 223, .56); font: 700 7px var(--mono); letter-spacing: .16em; }

.statement { position: absolute; z-index: 1; left: clamp(22px, 4vw, 64px); bottom: clamp(105px, 14vh, 155px); width: min(760px, calc(100% - 44px)); animation: rise 1s .25s cubic-bezier(.22, 1, .36, 1) both; }
.kicker { margin: 0 0 24px; color: var(--copper); font: 700 8px var(--mono); letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(57px, 7.1vw, 110px); font-weight: 600; line-height: .88; letter-spacing: -.067em; text-wrap: balance; }
h1 em { color: var(--copper); font-family: var(--editorial); font-weight: 400; }
.supporting { margin: 28px 0 0; color: rgba(235, 231, 223, .78); font-family: var(--editorial); font-size: clamp(18px, 1.55vw, 25px); line-height: 1.35; }

footer { position: absolute; z-index: 2; left: clamp(22px, 4vw, 64px); right: clamp(22px, 4vw, 64px); bottom: 0; height: 66px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: rgba(235, 231, 223, .46); font: 700 7px var(--mono); letter-spacing: .14em; animation: appear .9s .45s ease both; }
footer a { transition: color .2s ease; }
footer a:hover { color: var(--copper); }

@keyframes settle { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: scale(1.01); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .art { background-position: 64% center; }
  .shade { background: linear-gradient(180deg, rgba(6, 7, 8, .7) 0%, rgba(6, 7, 8, .18) 30%, rgba(6, 7, 8, .38) 55%, rgba(6, 7, 8, .98) 100%), linear-gradient(90deg, rgba(6, 7, 8, .45), transparent 80%); }
  header { height: 74px; }
  header > p { display: none; }
  .statement { bottom: 105px; }
  h1 { max-width: 590px; font-size: clamp(55px, 15.5vw, 85px); line-height: .91; }
  .supporting { margin-top: 21px; font-size: 18px; }
  footer { height: 55px; }
  footer span { display: none; }
  footer a { margin-left: auto; }
}

@media (max-width: 460px) {
  .art { background-position: 68% center; }
  .statement { bottom: 92px; }
  .kicker { margin-bottom: 17px; }
  h1 { font-size: clamp(51px, 14.5vw, 67px); }
  .supporting { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}