@font-face {
  font-family: "ASCII Sculpture";
  src: url("/fonts/NotoSerif-Latin-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

#top { background: #101116; isolation: isolate; }
#top::before, #top::after { display: none; }
.home-ascii-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .72; }
#homeAscii { display: block; width: 100%; height: 100%; }
.home-ascii-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, #101116eb 12%, #10111680 25%, transparent 45%);
}
#bioJournal {
  background: var(--bg);
  padding-top: clamp(72px, 8vw, 112px);
}
#bioJournal::before {
  background:
    radial-gradient(ellipse 75% 260px at 50% 0%, rgba(var(--redx-rgb), .065), transparent 80%),
    radial-gradient(ellipse 900px 600px at 50% 40%, rgba(var(--redx-rgb), .04), transparent 70%);
}
#bioJournal::after {
  mix-blend-mode: normal;
  opacity: .14;
  background-image: radial-gradient(rgba(var(--cream-rgb), .35) .65px, transparent .8px);
  background-size: 8px 8px;
  mask-image: linear-gradient(transparent, #000 48px, transparent 260px);
}
#top .h-top {
  justify-content: center;
  min-height: 510px;
  margin: 0;
  padding: 80px 32px 48px;
}
#top .h-hero-intro {
  width: 100%;
  margin: 0;
  animation: none;
  background: radial-gradient(ellipse closest-side, #101116e6, #101116a6 70%, transparent);
}
#top .h-hero-hl { font-size: clamp(36px, 5vw, 64px); transform: none; text-wrap: balance; text-shadow: 0 2px 12px #101116; }
#top .h-hero-hl em { color: #739cff; }
html[data-theme="warm"] #top .h-hero-hl em { color: var(--redp); }
#top .h-ctas { margin-top: 25px; }
.hero-art-status[hidden] { display: none; }
.hero-art-status {
  position: absolute;
  top: 130px;
  right: calc(var(--col) + 24px);
  max-width: 260px;
  z-index: 3;
  padding: 12px;
  background: #101116;
  color: var(--cream);
  font: 12px var(--fm);
}
#top.hero-motion-paused .h-mq-t { animation-play-state: paused; }
.bio-ripple-word { display: inline-block; white-space: nowrap; }
.bio-ripple-char { display: inline-block; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bio-ripple-char {
    transform: translateY(var(--bio-lift, 0px)) rotate(var(--bio-tilt, 0deg));
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .5s ease;
  }
  .bio-ripple-char.is-near { color: var(--redp); }
}
@media (max-width: 700px) {
  #bioJournal .bio-copy.fade { opacity: 1; transform: none; transition: none; }
  #top .h-mq-item { font-size: clamp(23px, 6.2vw, 32px); }
  .home-ascii-field::after {
    background: linear-gradient(0deg, var(--bg), #101116b3 8%, #10111640 18%, transparent 32%);
  }
  #top .h-top { min-height: 490px; padding: 108px 20px 40px; }
  #top .h-hero-intro { position: relative; isolation: isolate; background: none; }
  #top .h-hero-intro::before {
    content: "";
    position: absolute;
    inset: -28px -20px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse, #101116fa 25%, #101116e6 60%, transparent 75%);
  }
  #top .h-hero-hl { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.12; letter-spacing: -.025em; }
  #top .h-hero-hl wbr { display: none; }
  #top .h-hero-hl em { margin-top: 14px; line-height: 1.12; }
  #top .h-cta {
    background: rgba(38, 40, 49, .7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    font-weight: 600;
    letter-spacing: .12em;
  }
  #top .h-cta:active { background: rgba(53, 57, 71, .8) !important; }
  #top .h-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
}