:root {
  --red: #ef1d16;
  --red-dark: #bd1712;
  --cream: #f7ead8;
  --green: #0a793f;
  --green-dark: #07572f;
  --ink: #0b1510;
  color-scheme: only light;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--red-dark);
  color: var(--cream);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--red);
  box-shadow: 0 0 50px rgba(27, 5, 2, 0.32);
}

.wrapper-texture,
.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.wrapper-texture {
  z-index: -1;
  opacity: 0.76;
  background-image:
    radial-gradient(circle at 7% 13%, rgba(11, 21, 16, 0.8) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 92% 68%, rgba(247, 234, 216, 0.6) 0 0.65px, transparent 0.85px),
    repeating-linear-gradient(103deg, transparent 0 32px, rgba(255, 255, 255, 0.09) 33px, transparent 35px 68px),
    repeating-linear-gradient(2deg, transparent 0 26px, rgba(81, 4, 0, 0.08) 27px, transparent 29px 61px);
  background-size: 5px 5px, 7px 7px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

.hero::before {
  z-index: 7;
  opacity: 0.55;
  background:
    linear-gradient(112deg, transparent 0 16%, rgba(255, 255, 255, 0.22) 16.2%, transparent 16.8% 47%, rgba(93, 3, 0, 0.13) 47.3%, transparent 48%),
    linear-gradient(74deg, transparent 0 26%, rgba(255, 255, 255, 0.15) 26.3%, transparent 27% 71%, rgba(255, 255, 255, 0.16) 71.3%, transparent 72%),
    radial-gradient(ellipse at 52% 9%, transparent 0 39%, rgba(255, 255, 255, 0.12) 40%, transparent 42%),
    radial-gradient(ellipse at 22% 77%, transparent 0 28%, rgba(70, 4, 0, 0.12) 29%, transparent 31%);
  mix-blend-mode: screen;
}

.hero::after {
  z-index: 8;
  box-shadow:
    inset 0 0 22px rgba(83, 4, 0, 0.24),
    inset 8px 0 20px rgba(255, 241, 220, 0.08),
    inset -8px 0 18px rgba(57, 3, 0, 0.12);
}

.crimp {
  position: absolute;
  z-index: 9;
  left: 0;
  width: 100%;
  height: 24px;
  opacity: 0.7;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(92, 7, 2, 0.45) 0 1px,
      rgba(255, 241, 220, 0.22) 2px,
      transparent 3px 5px
    );
  pointer-events: none;
}

.crimp--top {
  top: 0;
  border-bottom: 1px solid rgba(58, 4, 0, 0.36);
}

.crimp--bottom {
  bottom: 0;
  transform: rotate(180deg);
  border-bottom: 1px solid rgba(58, 4, 0, 0.36);
}

.nav {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  width: calc(100% - 32px);
  margin: max(28px, env(safe-area-inset-top)) 16px 0;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.7rem, 2.9vw, 0.84rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.nav a {
  display: grid;
  min-height: 44px;
  place-items: center;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.nav a:hover,
.nav a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.anchor {
  position: absolute;
  top: 0;
}

.hero-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.name {
  position: absolute;
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100% - 28px);
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(3.35rem, 18.3vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.78;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: clamp(1.5px, 0.65vw, 3px) var(--ink);
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 var(--ink),
    7px 9px 0 var(--ink);
}

.name--first {
  top: 14%;
  transform: translateX(-50%) rotate(-1.2deg);
}

.name--last {
  top: 22.5%;
  transform: translateX(-50%) rotate(0.8deg);
}

.mascot-wrap {
  position: absolute;
  z-index: 4;
  top: 30%;
  left: 50%;
  width: min(95vw, calc(64dvh - 98px), 490px);
  aspect-ratio: 1216 / 1294;
  margin: 0;
  transform: translateX(-50%) rotate(-1deg);
  filter: drop-shadow(5px 7px 0 rgba(11, 21, 16, 0.86));
}

.mascot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.burst {
  position: absolute;
  z-index: 3;
  width: 68px;
  aspect-ratio: 1;
  background: var(--cream);
  clip-path: polygon(50% 0, 60% 33%, 88% 15%, 70% 43%, 100% 50%, 69% 59%, 88% 86%, 59% 69%, 50% 100%, 41% 68%, 13% 87%, 31% 59%, 0 50%, 32% 41%, 14% 14%, 41% 32%);
  filter: drop-shadow(3px 4px 0 var(--ink));
}

.burst--left {
  top: 48%;
  left: -21px;
  transform: rotate(-8deg);
}

.burst--right {
  top: 54%;
  right: -30px;
  width: 76px;
  transform: rotate(12deg);
  background: var(--green);
}

.descriptor {
  position: absolute;
  z-index: 10;
  right: 18px;
  bottom: max(clamp(72px, 10dvh, 96px), calc(env(safe-area-inset-bottom) + 34px));
  left: 18px;
  display: block;
  padding-top: 9px;
  border-top: 3px solid var(--cream);
  color: var(--cream);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.78rem, 3.5vw, 0.96rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 2px 2px 0 var(--ink);
}

.scribble {
  position: absolute;
  z-index: 10;
  right: 15%;
  bottom: clamp(46px, 7dvh, 68px);
  width: 48%;
  overflow: visible;
  fill: none;
  stroke: var(--green-dark);
  stroke-linecap: round;
  stroke-width: 5;
  filter: drop-shadow(1px 1px 0 var(--ink));
  display: none;
}

.current-focus {
  position: relative;
  isolation: isolate;
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  padding: 42px 0 78px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 28px 50px rgba(27, 5, 2, 0.28);
  scroll-margin-top: 0;
}

.focus-texture,
.current-focus::before,
.current-focus::after,
.work-pack::before,
.work-pack::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.focus-texture {
  z-index: -2;
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(11, 21, 16, 0.22) 0 0.65px, transparent 0.85px),
    repeating-linear-gradient(7deg, transparent 0 29px, rgba(148, 36, 21, 0.08) 30px, transparent 32px 63px),
    repeating-linear-gradient(103deg, transparent 0 46px, rgba(255, 255, 255, 0.6) 47px, transparent 50px 94px);
  background-size: 6px 6px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

.current-focus::before {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 7% 32%, transparent 0 21%, rgba(239, 29, 22, 0.05) 21.5%, transparent 23%),
    radial-gradient(ellipse at 89% 77%, transparent 0 25%, rgba(10, 121, 63, 0.08) 25.5%, transparent 27%),
    linear-gradient(102deg, transparent 0 19%, rgba(11, 21, 16, 0.045) 19.2%, transparent 19.7% 72%, rgba(255, 255, 255, 0.55) 72.2%, transparent 72.8%);
}

.current-focus::after {
  z-index: 20;
  inset: 0;
  box-shadow:
    inset 0 0 24px rgba(83, 39, 8, 0.16),
    inset 9px 0 19px rgba(255, 255, 255, 0.45),
    inset -8px 0 18px rgba(53, 23, 4, 0.08);
}

.focus-header,
.focus-copy {
  position: relative;
  z-index: 2;
  padding-inline: 20px;
}

.focus-kicker {
  width: max-content;
  margin: 0 0 11px 3px;
  padding: 9px 17px 8px;
  background: var(--red);
  color: var(--cream);
  clip-path: polygon(2% 10%, 9% 5%, 14% 10%, 20% 4%, 28% 9%, 35% 3%, 42% 9%, 50% 4%, 57% 9%, 64% 3%, 71% 10%, 79% 4%, 86% 9%, 94% 4%, 99% 13%, 97% 25%, 100% 37%, 97% 49%, 100% 62%, 97% 74%, 99% 89%, 92% 95%, 85% 91%, 78% 97%, 70% 91%, 63% 97%, 56% 92%, 48% 97%, 40% 91%, 33% 97%, 25% 91%, 18% 96%, 10% 90%, 3% 94%, 1% 82%, 3% 69%, 0 56%, 3% 43%, 0 30%, 3% 20%);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  filter: drop-shadow(3px 4px 0 var(--ink));
  transform: rotate(-1deg);
}

.focus-heading-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 92px;
}

.focus-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff4e5;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(6.1rem, 31vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.72;
  text-transform: uppercase;
  -webkit-text-stroke: clamp(2px, 0.75vw, 4px) var(--ink);
  paint-order: stroke fill;
  text-shadow:
    3px 3px 0 var(--ink),
    7px 7px 0 var(--green),
    11px 11px 0 var(--ink),
    14px 14px 0 var(--red);
  transform: rotate(-0.9deg);
}

.focus-icon {
  position: absolute;
  z-index: 3;
  top: -42px;
  right: 4px;
  width: 62px;
  overflow: visible;
  filter: drop-shadow(2px 3px 0 var(--ink));
  transform: rotate(4deg);
}

.focus-icon__network,
.focus-icon__node,
.focus-icon__spark {
  vector-effect: non-scaling-stroke;
}

.focus-icon__network {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.focus-icon__node {
  stroke: var(--ink);
  stroke-width: 3;
}

.focus-icon__node--cream {
  fill: var(--cream);
}

.focus-icon__node--red {
  fill: var(--red);
}

.focus-icon__node--green {
  fill: var(--green);
}

.focus-icon__spark {
  fill: var(--red);
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.focus-copy {
  position: relative;
  z-index: 2;
  width: calc(100% - 40px);
  margin: 24px 20px 0;
  overflow: hidden;
  border-top: 1px solid rgba(11, 21, 16, 0.55);
  border-bottom: 1px solid rgba(11, 21, 16, 0.55);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.58rem, 2.45vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.focus-copy-track {
  display: flex;
  width: max-content;
  padding-block: 10px 9px;
  animation: focus-ticker 28s linear infinite;
}

.focus-sentence {
  flex: none;
  padding-right: 3.6rem;
  white-space: nowrap;
}

.focus-sentence b {
  color: var(--red);
}

.focus-copy.focus-copy--static {
  max-width: 42ch;
  padding: 0;
  border: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  text-wrap: pretty;
  mask-image: none;
}

.work-rail {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 23px;
  padding: 12px 20px 32px;
}

.work-pack {
  position: relative;
  display: grid;
  min-height: 410px;
  overflow: hidden;
  padding: 38px 22px 31px;
  border: 3px solid var(--ink);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 8px 10px 0 var(--ink);
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.work-pack--green {
  background: var(--green);
  transform: rotate(-1.4deg);
}

.work-pack--red {
  background: var(--red);
  transform: rotate(1.2deg);
}

.work-pack--tronex {
  background: #151515;
  transform: rotate(1.2deg);
}

.work-pack--tronex .pack-index {
  color: #ff9d28;
}

.work-pack--project {
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  row-gap: 12px;
  min-height: 490px;
}

.pack-preview {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 380px);
  aspect-ratio: 16 / 10;
  margin-block: 24px 12px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
}

.pack-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-pack::before {
  z-index: 0;
  inset: 0;
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(11, 21, 16, 0.65) 0 0.7px, transparent 0.9px),
    repeating-linear-gradient(98deg, transparent 0 25px, rgba(255, 244, 229, 0.13) 26px, transparent 29px 56px),
    linear-gradient(116deg, transparent 0 25%, rgba(255, 244, 229, 0.18) 25.4%, transparent 26.2% 64%, rgba(11, 21, 16, 0.16) 64.5%, transparent 65.2%);
  background-size: 5px 5px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

.work-pack::after {
  z-index: 1;
  inset: 8px;
  border: 1px solid rgba(247, 234, 216, 0.3);
  box-shadow: inset 0 0 20px rgba(11, 21, 16, 0.24);
}

.work-pack > *:not(.pack-crimp) {
  position: relative;
  z-index: 2;
}

.pack-crimp {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 19px;
  opacity: 0.72;
  background: repeating-linear-gradient(0deg, rgba(11, 21, 16, 0.55) 0 1px, rgba(255, 244, 229, 0.3) 2px, transparent 3px 5px);
}

.pack-crimp--top {
  top: 0;
  border-bottom: 1px solid rgba(11, 21, 16, 0.55);
}

.pack-crimp--bottom {
  bottom: 0;
  border-bottom: 1px solid rgba(11, 21, 16, 0.55);
  transform: rotate(180deg);
}

.pack-index {
  align-self: start;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.pack-art {
  align-self: center;
  justify-self: center;
  width: 86%;
  max-height: 170px;
  overflow: visible;
  fill: var(--cream);
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  filter: drop-shadow(5px 6px 0 rgba(11, 21, 16, 0.82));
}

.pack-art--browser path:nth-child(3),
.pack-art--rocket circle {
  fill: var(--red);
}

.pack-art--dashboard .dashboard-panel {
  fill: #ff9d28;
}

.pack-art--dashboard .dashboard-bars {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
}

.pack-art--dashboard .dashboard-lines {
  fill: none;
}

.work-pack--red .pack-art--rocket path:first-child {
  fill: var(--green);
}

.work-pack--red .pack-art--rocket path:nth-child(2) {
  fill: var(--cream);
}

.work-pack--red .pack-art--rocket path:last-child {
  fill: var(--green);
}

.pack-title {
  align-self: end;
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(3.25rem, 15vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.75;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--ink);
}

.pack-meta {
  align-self: end;
  margin-top: 13px;
  padding-top: 9px;
  border-top: 2px solid currentColor;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.pack-arrow {
  position: absolute !important;
  top: 29px;
  right: 18px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
}

.pack-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2.5;
}

.work-pack:hover,
.work-pack:focus-visible {
  z-index: 5;
  outline: none;
  box-shadow: 11px 14px 0 var(--ink);
  transform: translateY(-6px) rotate(0);
}

.work-pack:focus-visible {
  outline: 4px solid var(--red);
  outline-offset: 5px;
}

.work-pack:active {
  box-shadow: 4px 5px 0 var(--ink);
  transform: translateY(2px) scale(0.98) rotate(0);
}

.previous-focus {
  position: relative;
  isolation: isolate;
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  padding: 42px 0 78px;
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 28px 50px rgba(27, 5, 2, 0.3);
  scroll-margin-top: 0;
}

.previous-texture,
.previous-focus::before,
.previous-focus::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.previous-texture {
  z-index: -2;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(11, 21, 16, 0.45) 0 0.65px, transparent 0.9px),
    repeating-linear-gradient(98deg, transparent 0 37px, rgba(255, 255, 255, 0.09) 38px, transparent 41px 76px),
    repeating-linear-gradient(4deg, transparent 0 31px, rgba(5, 56, 29, 0.18) 32px, transparent 35px 69px);
  background-size: 9px 9px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
}

.previous-focus::before {
  z-index: -1;
  background:
    radial-gradient(ellipse at 12% 25%, transparent 0 24%, rgba(247, 234, 216, 0.08) 24.5%, transparent 26%),
    radial-gradient(ellipse at 91% 71%, transparent 0 22%, rgba(239, 29, 22, 0.1) 22.5%, transparent 24%),
    linear-gradient(108deg, transparent 0 31%, rgba(255, 255, 255, 0.1) 31.3%, transparent 32% 70%, rgba(4, 52, 26, 0.15) 70.5%, transparent 71%);
}

.previous-focus::after {
  z-index: 20;
  box-shadow:
    inset 0 0 25px rgba(1, 34, 16, 0.32),
    inset 8px 0 18px rgba(247, 234, 216, 0.08),
    inset -8px 0 18px rgba(0, 24, 11, 0.2);
}

.previous-header {
  position: relative;
  z-index: 2;
  padding-inline: 20px;
}

.previous-kicker {
  background: var(--cream);
  color: var(--red);
}

.previous-heading-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 84px;
}

.previous-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(5rem, 24.8vw, 8.6rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.76;
  text-transform: uppercase;
  -webkit-text-stroke: clamp(2px, 0.75vw, 4px) var(--ink);
  paint-order: stroke fill;
  text-shadow:
    3px 3px 0 var(--ink),
    7px 7px 0 var(--red),
    11px 11px 0 var(--ink);
  transform: rotate(0.7deg);
}

.previous-icon {
  position: absolute;
  z-index: 3;
  top: -41px;
  right: 3px;
  width: 58px;
  overflow: visible;
  filter: drop-shadow(2px 3px 0 var(--ink));
  transform: rotate(5deg);
}

.previous-icon__tile,
.previous-icon__play,
.previous-icon__spark {
  vector-effect: non-scaling-stroke;
  stroke: var(--ink);
  stroke-linejoin: round;
}

.previous-icon__tile {
  fill: var(--cream);
  stroke-width: 3;
}

.previous-icon__play {
  fill: var(--red);
  stroke-width: 3;
}

.previous-icon__spark {
  fill: var(--cream);
  stroke-width: 2.5;
}

.previous-proof {
  position: relative;
  z-index: 2;
  width: calc(100% - 40px);
  margin: 24px 20px 0;
  padding: 13px 14px 10px;
  border: 3px solid var(--ink);
  background: var(--red);
  color: var(--cream);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(-0.45deg);
}

.previous-proof::before {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(247, 234, 216, 0.28);
  pointer-events: none;
  content: "";
}

.previous-proof__metric {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.previous-proof__metric strong {
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: clamp(2.2rem, 10.8vw, 3rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 0.72;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}

.previous-proof__metric strong span {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.previous-proof__metric > span {
  padding-bottom: 1px;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.55rem, 2.25vw, 0.67rem);
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 0.96;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.previous-proof__roster {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid rgba(247, 234, 216, 0.72);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.44rem, 2.02vw, 0.58rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.previous-work {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 24px;
  padding: 12px 20px 24px;
  margin-top: 23px;
}

.previous-work .work-pack::before {
  opacity: 0.18;
}

.work-pack--article {
  min-height: 465px;
  grid-template-rows: auto minmax(150px, 1fr) auto auto;
  background: var(--red);
  transform: rotate(0.9deg);
}

.pack-title--article {
  font-size: clamp(2.35rem, 9.2vw, 3.6rem);
  letter-spacing: -0.025em;
  line-height: 0.86;
}

.work-pack--article .pack-meta {
  line-height: 1.35;
}

.work-pack--single {
  width: 100%;
  min-height: 465px;
  grid-template-rows: auto minmax(170px, 1fr) auto auto;
}

.work-pack--cream {
  background: var(--cream);
  color: var(--ink);
  transform: rotate(-0.8deg);
}

.work-pack--cream::after {
  border-color: rgba(11, 21, 16, 0.22);
}

.work-pack--cream .pack-title {
  color: var(--ink);
  font-size: clamp(2.5rem, 12vw, 4.1rem);
  letter-spacing: -0.025em;
  line-height: 0.9;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.work-pack--cream .pack-arrow {
  background: var(--red);
  color: var(--cream);
}

.pack-art--creator {
  fill: none;
}

.work-pack--single .pack-title {
  grid-row: 3;
}

.work-pack--single .pack-meta {
  grid-row: 4;
}

.pack-art--creator .creator-window {
  fill: var(--green);
}

.pack-art--creator .creator-play,
.pack-art--creator .creator-spark {
  fill: var(--red);
}

.pack-art--creator .creator-wand {
  fill: none;
}

@media (min-width: 420px) {
  .nav {
    width: calc(100% - 44px);
    margin-inline: 22px;
  }

  .descriptor {
    right: 24px;
    left: 24px;
  }

  .focus-header {
    padding-inline: 28px;
  }

  .previous-header {
    padding-inline: 28px;
  }

  .focus-copy {
    width: calc(100% - 56px);
    margin-inline: 28px;
    margin-top: 34px;
  }

  .work-rail {
    padding-inline: 28px;
  }

  .previous-proof {
    width: calc(100% - 56px);
    margin-inline: 28px;
  }

  .previous-work {
    padding-inline: 28px;
  }
}

@media (max-height: 740px) {
  .name {
    font-size: clamp(3.1rem, 17.5vw, 5rem);
  }

  .name--first {
    top: 13.5%;
  }

  .name--last {
    top: 21%;
  }

  .mascot-wrap {
    top: clamp(182px, calc(17.5dvh + 83px), 215px);
    width: min(91vw, calc(72dvh - 120px), 420px);
  }

  .descriptor {
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 24px));
  }
}

@media (min-width: 561px) {
  body {
    padding: 24px 0;
  }

  .hero {
    min-height: calc(100dvh - 48px);
  }

  .current-focus {
    min-height: calc(100dvh - 48px);
  }

  .previous-focus {
    min-height: calc(100dvh - 48px);
  }
}

@media (max-width: 349px) {
  .name {
    font-size: clamp(3.2rem, 17.2vw, 3.55rem);
    max-width: calc(100% - 36px);
  }

  .mascot-wrap {
    width: min(96vw, calc(72dvh - 120px), 420px);
  }

  .focus-title {
    font-size: 5.55rem;
  }

  .focus-header,
  .focus-copy {
    padding-inline: 16px;
  }

  .focus-heading-row {
    min-height: 74px;
  }

  .focus-copy {
    width: calc(100% - 32px);
    margin-inline: 16px;
    margin-top: 20px;
  }

  .work-rail {
    gap: 20px;
    margin-top: 20px;
    padding-inline: 16px;
  }

  .previous-header {
    padding-inline: 16px;
  }

  .previous-heading-row {
    min-height: 72px;
  }

  .previous-proof {
    width: calc(100% - 32px);
    margin: 20px 16px 0;
  }

  .previous-work {
    margin-top: 20px;
    padding-inline: 16px;
  }

  .previous-title {
    font-size: 5rem;
  }

  .work-pack {
    min-height: 385px;
    padding-inline: 18px;
  }
}

@media (max-width: 419px) {
  .name--first {
    top: clamp(104px, 34vw, 142px);
  }

  .name--last {
    top: clamp(164px, 53vw, 220px);
  }

  .mascot-wrap {
    top: min(clamp(294px, 92vw, 340px), calc(80dvh - 350px));
    width: min(96vw, calc(58dvh - 100px), 420px);
  }

  .descriptor {
    bottom: max(clamp(80px, calc(87dvh - 223px - 115vw), 360px), calc(env(safe-area-inset-bottom) + 40px));
  }
}

@media (max-width: 419px) and (max-height: 740px) {
  .name--first {
    top: 96px;
  }

  .name--last {
    top: 154px;
  }

  .mascot-wrap {
    top: 210px;
  }

  .descriptor {
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 24px));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nav,
  .name,
  .mascot-wrap,
  .descriptor {
    opacity: 0;
    animation: enter 620ms cubic-bezier(0.2, 0.78, 0.24, 1) forwards;
  }

  .name--first {
    animation-delay: 70ms;
  }

  .name--last {
    animation-delay: 130ms;
  }

  .mascot-wrap {
    animation-delay: 210ms;
  }

  .descriptor {
    animation-delay: 310ms;
  }

}

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

  .work-pack {
    transition: none;
  }

  .focus-copy {
    overflow-x: auto;
    mask-image: none;
    scrollbar-width: none;
  }

  .focus-copy::-webkit-scrollbar,
  .focus-sentence--clone {
    display: none;
  }

  .focus-copy-track {
    animation: none;
  }
}

@keyframes focus-ticker {
  to {
    transform: translateX(-50%);
  }
}

@keyframes enter {
  from {
    opacity: 0;
    translate: 0 16px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}