:root {
  --collision-ink: #241814;
  --collision-paper: #f2ede4;
  --collision-blue: #2252d6;
  --collision-burnt-orange: #c66d48;
  --collision-clay: #a74627;
  --collision-clay-light: #dc9362;
  --collision-clay-pale: #f6c39d;
  --collision-line: rgba(242, 237, 228, .34);
}

html { scroll-behavior: smooth; }

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

.not-shawn-page {
  margin: 0;
  color: var(--collision-ink);
  background: var(--collision-paper);
  font-family: "DM Mono", monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.not-shawn-page a { color: inherit; }
.not-shawn-page em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.not-shawn-skip {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  transform: translateY(-180%);
  background: var(--collision-paper);
  color: var(--collision-ink);
}

.not-shawn-skip:focus { transform: translateY(0); }

.not-shawn-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1rem, 3vw, 3rem);
  color: var(--collision-paper);
  font-size: max(.72rem, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.not-shawn-header a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.not-shawn-header nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.not-shawn-header nav a { padding-inline: .35rem; border-bottom: 1px solid transparent; }
.not-shawn-header nav a:hover, .not-shawn-header nav a:focus-visible { border-color: currentColor; }
.not-shawn-brand { display: inline-flex !important; align-items: center; }
.not-shawn-watermark {
  position: relative;
  display: block;
  width: clamp(9rem, 12vw, 12rem);
  aspect-ratio: 1466 / 545;
}
.not-shawn-watermark__signal,
.not-shawn-watermark__word {
  position: absolute;
  display: block;
  object-fit: contain;
}
.not-shawn-watermark__signal {
  inset: 0;
  width: 100%;
  height: 100%;
}
.not-shawn-watermark__word {
  top: 20%;
  left: 33.56%;
  width: 57.71%;
  height: 60%;
}

.name-collision {
  position: relative;
  display: grid;
  min-height: 78svh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(5.5rem, 9vw, 7rem) clamp(1rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(104, 50, 39, .5), transparent 42%),
    radial-gradient(ellipse at 42% 58%, rgba(64, 34, 29, .58), transparent 56%),
    var(--collision-ink);
  color: var(--collision-paper);
  isolation: isolate;
}

.name-collision::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background-image: var(--analog-grain-image, none);
  background-size: 72px 72px;
  mix-blend-mode: soft-light;
  opacity: .08;
}

.collision-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: .7rem;
  border-top: 1px solid var(--collision-line);
  font-size: max(.68rem, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.collision-meta span:nth-child(2) { text-align: center; }
.collision-meta span:last-child { text-align: right; }

.collision-stage {
  position: relative;
  display: grid;
  min-height: 0;
  align-items: center;
}

.name-collision h1 {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(9rem, .68fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 6rem);
  width: min(64vw, 62rem);
  align-items: start;
  margin: 0;
  color: var(--collision-paper);
}

.name-collision h1 span { display: block; }
.collision-setup {
  display: grid !important;
  gap: .7rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(242, 237, 228, .55);
}
.setup-kicker {
  font: 500 max(.68rem, 12px)/1.2 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.setup-copy {
  font: 400 clamp(.95rem, 1.15vw, 1.15rem)/1.22 Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
}
.setup-name {
  color: var(--collision-blue);
  font: italic 400 clamp(1.8rem, 2.45vw, 2.7rem)/.94 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}
.collision-statement {
  display: grid !important;
  max-width: 14ch;
  gap: clamp(.9rem, 1.5vw, 1.35rem);
  font-family: Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.04em;
}
.identity-name {
  font-size: clamp(3.2rem, 4.9vw, 5.6rem);
  line-height: .82;
}
.identity-name strong { color: var(--collision-burnt-orange); font-weight: inherit; }
.identity-description {
  max-width: 22ch;
  padding-top: .7rem;
  border-top: 1px solid rgba(242, 237, 228, .55);
  font-size: clamp(1rem, 1.45vw, 1.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.entrance-visual {
  position: absolute;
  z-index: 1;
  top: 46%;
  right: clamp(-9rem, -6vw, -4rem);
  width: min(84vw, 88rem);
  margin: 0;
  transform: translateY(-50%);
}

.entrance-visual::after {
  content: "";
  position: absolute;
  inset: 6% 3% 3%;
  z-index: -1;
  background: radial-gradient(ellipse at 64% 60%, rgba(246, 195, 157, .2), transparent 52%);
  filter: blur(22px);
}

.entrance-visual video,
.entrance-safari-fallback {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter:
    contrast(1.08)
    drop-shadow(3px 0 rgba(198, 109, 72, .62))
    drop-shadow(-3px 0 rgba(73, 119, 133, .62))
    drop-shadow(0 2rem 2.2rem rgba(0, 0, 0, .26));
}
.entrance-safari-fallback { display: none; }
.is-safari-alpha-fallback .entrance-safari-fallback { display: block; }
.is-safari-alpha-fallback .entrance-visual video { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .name-collision h1 > span {
    animation: collision-reveal .8s cubic-bezier(.16, 1, .3, 1) both;
    clip-path: inset(0 0 100% 0);
  }
  .name-collision h1 > span:nth-child(2) { animation-delay: .1s; }
  @keyframes collision-reveal { to { clip-path: inset(0); } }
}

.collision-footer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 38rem);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}

.collision-footnote {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid var(--collision-line);
  font-size: max(.72rem, 12px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.identity-icons {
  display: grid;
  width: min(100%, 12rem);
  grid-template-columns: repeat(3, 2.25rem);
  gap: .65rem .8rem;
  align-items: center;
}

.identity-icons img {
  display: block;
  width: 100%;
  height: 2rem;
  object-fit: contain;
  object-position: left center;
  opacity: .78;
}

.identity-icons .identity-icons__barcode {
  width: 100%;
  height: .5rem;
  grid-column: 1 / -1;
  object-fit: fill;
  opacity: .5;
}

.section-code {
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid currentColor;
  font-size: max(.7rem, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.entrance-controls {
  position: relative;
  z-index: 2;
  display: block;
}

.music-control {
  display: grid;
  min-height: 48px;
  width: 100%;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0 1rem;
  padding: .25rem 0;
  border: 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--collision-paper);
  background: transparent;
  font: 500 clamp(1rem, 1.4vw, 1.25rem) "DM Mono", monospace;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.music-control > span { grid-column: 1; }
.music-eyebrow { font-size: max(.64rem, 11px); letter-spacing: .08em; }

.music-control::after { content: "PLAY"; grid-column: 2; grid-row: 1 / 3; align-self: end; font-size: max(.68rem, 12px); }
.music-control[aria-pressed="true"] { color: var(--collision-clay-pale); }
.music-control[aria-pressed="true"]::after { content: "STOP"; }
.music-control:focus-visible { outline: 2px solid var(--collision-paper); outline-offset: .35rem; }

.collision-explainer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(11rem, .35fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: end;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 3rem);
  background: var(--collision-blue);
  color: var(--collision-paper);
  isolation: isolate;
}
.collision-explainer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: var(--analog-grain-image, none);
  background-size: 72px 72px;
  mix-blend-mode: soft-light;
  opacity: .14;
}
.collision-explainer > * { position: relative; z-index: 1; }
.explainer-action { display: grid; align-self: stretch; align-content: end; gap: clamp(1.25rem, 2vw, 1.75rem); }
.collision-explainer p { max-width: 68ch; margin: 0; font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.58; }
.collision-explainer strong { color: var(--collision-clay-pale); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.collision-explainer a { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding-block: .8rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; font-size: max(.75rem, 12px); font-weight: 500; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.collision-explainer a:hover { color: var(--collision-clay-pale); }
.collision-explainer a:focus-visible { outline-color: var(--collision-paper); }
.not-shawn-page a:focus-visible { outline: 2px solid var(--collision-blue); outline-offset: .35rem; }
.not-shawn-header a:focus-visible { outline-color: var(--collision-paper); }

.name-collision h1 .type-current-word {
  --current-lift: 0px;
  display: inline-block;
  transform: translate3d(0, var(--current-lift), 0);
  transition: color 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1);
  will-change: color, transform;
}

@media (min-width: 761px) {
  #not-shawn-main {
    display: grid;
    height: 100svh;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .name-collision {
    min-height: 0;
    padding-top: clamp(5.25rem, 10vh, 6.5rem);
    padding-bottom: clamp(1rem, 2vh, 1.5rem);
  }

  .collision-explainer {
    gap: clamp(2rem, 6vw, 7rem);
    padding-block: clamp(1.15rem, 2.5vh, 1.8rem);
  }

  .collision-explainer p {
    font-size: clamp(.88rem, 1.05vw, 1rem);
    line-height: 1.48;
  }

  .explainer-action { gap: clamp(.7rem, 1.5vh, 1rem); }
  .identity-icons { width: min(100%, 9rem); grid-template-columns: repeat(3, 1.8rem); gap: .4rem .65rem; }
  .identity-icons img { height: 1.5rem; }
  .identity-icons .identity-icons__barcode { height: .35rem; }
  .collision-explainer a { min-height: 46px; padding-block: .55rem; }
}

@media (max-width: 760px) {
  .not-shawn-header {
    padding: .8rem 1rem;
  }
  .not-shawn-watermark { width: clamp(7rem, 32vw, 8.5rem); }
  .not-shawn-header nav a:first-child { display: none; }
  .name-collision {
    min-height: 0;
    grid-template-rows: auto auto auto;
    padding: 5.25rem 1rem 1.25rem;
  }
  .collision-meta { grid-template-columns: 1fr auto; }
  .collision-meta span:nth-child(2) { display: none; }
  .collision-stage {
    display: grid;
    align-items: start;
    padding-top: clamp(2rem, 7vh, 3.25rem);
  }
  .name-collision h1 {
    width: 100%;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2.25rem);
  }
  .name-collision h1 > span { max-width: 100%; }
  .collision-setup { max-width: 24ch !important; gap: .45rem; }
  .setup-copy { max-width: 24ch; font-size: max(.9rem, 14px); }
  .setup-name { font-size: clamp(1.8rem, 8.5vw, 2.45rem); }
  .collision-statement { max-width: 12ch !important; gap: .75rem; }
  .identity-name { font-size: clamp(3.15rem, 15vw, 4.5rem); }
  .identity-description { max-width: 20ch !important; font-size: clamp(1rem, 4.6vw, 1.25rem); }
  .entrance-visual {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 132%;
    margin: clamp(-1.5rem, -4vw, -.75rem) -16% -.5rem;
    transform: none;
  }
  .entrance-visual video, .entrance-safari-fallback { filter: contrast(1.08) drop-shadow(2px 0 rgba(198,109,72,.62)) drop-shadow(-2px 0 rgba(73,119,133,.62)) drop-shadow(0 1.2rem 1.4rem rgba(0,0,0,.26)); }
  .collision-footer { grid-template-columns: 1fr; gap: 1rem; }
  .collision-footnote { max-width: 27ch; line-height: 1.5; }
  .identity-icons {
    width: min(100%, 10rem);
    grid-template-columns: repeat(3, 1.75rem);
    gap: .45rem .65rem;
  }
  .identity-icons img { height: 1.45rem; }
  .identity-icons .identity-icons__barcode { height: .35rem; }
  .music-control { min-width: 0; min-height: 48px; padding-block: .25rem; font-size: max(.75rem, 12px); }
  .collision-explainer { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 390px) {
  .collision-meta { font-size: 11px; letter-spacing: .055em; }
  .identity-name { font-size: clamp(3rem, 15.5vw, 3.75rem); }
  .entrance-visual { width: 138%; margin-inline: -19%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entrance-visual video { animation: none; }
  .is-safari-alpha-fallback .entrance-safari-fallback { content: url("assets/media/not-shawn-michaels/shaun-kick-poster-warmer.png"); }
  .type-current-word { color: inherit; transform: none; transition: none; }
}