:root {
  --paper: #f2f0e9;
  --paper-bright: #faf9f5;
  --ink: #181a1d;
  --muted: #6d6d68;
  --accent: #ea4e2b;
  --line: rgba(24, 26, 29, 0.2);
  --emboss-shadow: 0 -1px 1px rgba(24,26,29,.38), 0 1px 0 rgba(255,255,255,.68), 0 0 5px rgba(24,26,29,.14);
  --pad: clamp(22px, 4.5vw, 76px);
  --paper-grain: 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='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .075'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.59'/%3E%3C/svg%3E");
  --font-display: Arial, Helvetica, sans-serif;
  --font-editorial: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  background-image: var(--paper-grain);
  background-attachment: fixed;
  font-family: var(--font-display);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad);
}

.brand {
  display: block;
  width: clamp(233px, 21.12vw, 334px);
  height: auto;
  margin-top: 6px;
  margin-left: calc(var(--pad) * -1);
  overflow: visible;
  pointer-events: auto;
}

.brand img {
  width: 100%;
  height: auto;
  transform-origin: center;
  animation: duck-float 9s cubic-bezier(.45, 0, .55, 1) infinite;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes duck-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 10px, 0); }
}

nav { display: flex; gap: clamp(16px, 2.6vw, 42px); }
nav a {
  position: relative;
  padding-bottom: 11px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

nav a:nth-child(1),
nav a:nth-child(4) {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 110 10' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.2 C15 3.5 26 7.3 41 5.2 C58 2.9 74 6.8 108 4.4' fill='none' stroke='%23ea4e2b' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M4 7.5 C24 5.9 39 7.2 55 5.5 C72 4.1 91 6.4 106 5.7' fill='none' stroke='%23ea4e2b' stroke-width='.7' stroke-linecap='round' opacity='.48'/%3E%3C/svg%3E");
}

nav a:nth-child(2),
nav a:nth-child(5) {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 110 10' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.7 C13 6.7 24 3.1 39 5.8 C53 8.1 70 3.6 84 5.1 C94 6.2 101 4.1 109 5.3' fill='none' stroke='%23ea4e2b' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M3 6.6 C19 5.1 31 6.7 48 5.4 C66 4 84 6.9 107 4.8' fill='none' stroke='%23ea4e2b' stroke-width='.75' stroke-linecap='round' opacity='.42'/%3E%3C/svg%3E");
  background-position: center calc(100% - 1px);
}

nav a:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 110 10' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5.5 C18 6.1 27 2.8 44 5 C61 7.6 78 4.2 91 5.7 C99 6.5 104 4.8 109 4.1' fill='none' stroke='%23ea4e2b' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M5 7.2 C22 4.8 38 6.4 54 5.9 C73 5.1 91 6.2 106 5' fill='none' stroke='%23ea4e2b' stroke-width='.65' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-position: right bottom;
}

nav a::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  color: #ff315d;
  opacity: 0;
  pointer-events: none;
}

nav a::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  color: #16cfe0;
  opacity: 0;
  pointer-events: none;
}

nav a:hover,
nav a:focus-visible {
  color: var(--ink);
  text-shadow: -1px 0 rgba(22,207,224,.28), 1px 0 rgba(255,49,93,.28);
  animation: pencil-underline 390ms steps(9, end) forwards;
}

nav a:nth-child(2):hover,
nav a:nth-child(2):focus-visible { animation-duration: 430ms; }

nav a:nth-child(3):hover,
nav a:nth-child(3):focus-visible { animation-duration: 360ms; }

@keyframes pencil-underline {
  0% { background-size: 0 8px; }
  55% { background-size: 68% 8px; }
  78% { background-size: 92% 8px; }
  100% { background-size: 108% 8px; }
}

nav a:hover::before,
nav a:focus-visible::before { animation: nav-glitch-a 420ms steps(2, end) both; }

nav a:hover::after,
nav a:focus-visible::after { animation: nav-glitch-b 420ms steps(2, end) both; }

@keyframes nav-glitch-a {
  0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
  14% { opacity: .9; transform: translate(-3px, 1px); clip-path: inset(8% 0 58% 0); }
  29% { opacity: .55; transform: translate(3px, -1px); clip-path: inset(62% 0 9% 0); }
  43% { opacity: .8; transform: translate(-1px, 0); clip-path: inset(35% 0 37% 0); }
  57%, 86% { opacity: 0; transform: translate(0); }
}

@keyframes nav-glitch-b {
  0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
  20% { opacity: .5; transform: translate(3px, 0); clip-path: inset(46% 0 24% 0); }
  36% { opacity: .8; transform: translate(-2px, 1px); clip-path: inset(15% 0 66% 0); }
  51% { opacity: .45; transform: translate(2px, -1px); clip-path: inset(72% 0 5% 0); }
  65%, 90% { opacity: 0; transform: translate(0); }
}

.intro {
  position: relative;
  min-height: 86vh;
  padding: clamp(260px, 27vh, 300px) var(--pad) 90px;
  overflow: hidden;
}

.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -28vw;
  right: -10vw;
  width: 54vw;
  height: 95vw;
  background: var(--paper-bright);
  background-image: var(--paper-grain);
  transform: rotate(18deg);
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.intro-identity {
  white-space: nowrap;
}

.intro h1 {
  position: relative;
  z-index: 0;
  isolation: isolate;
  max-width: 1120px;
  margin: 0;
  font-size: clamp(54px, 9.1vw, 148px);
  line-height: 0.85;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  text-shadow: var(--emboss-shadow);
}

.intro h1::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  bottom: -72px;
  width: 82%;
  height: 145px;
  background:
    radial-gradient(ellipse at 18% 5%, rgba(24,26,29,.16), transparent 47%),
    radial-gradient(ellipse at 52% 0%, rgba(24,26,29,.12), transparent 43%),
    radial-gradient(ellipse at 82% 12%, rgba(24,26,29,.09), transparent 42%);
  filter: blur(22px);
  opacity: .22;
  transform: translate3d(0,0,0) skewX(-5deg);
  animation: title-fume 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes title-fume {
  0% { transform: translate3d(-1%, -7px, 0) skewX(-5deg) scaleX(.98); opacity: .14; }
  46% { transform: translate3d(1.5%, 8px, 0) skewX(3deg) scaleX(1.01); opacity: .22; }
  100% { transform: translate3d(-.5%, 19px, 0) skewX(-2deg) scaleX(1.03); opacity: .12; }
}

.intro-copy {
  max-width: 530px;
  margin: 48px 0 30px;
  font-family: var(--font-editorial);
  font-size: clamp(19px, 1.7vw, 27px);
  font-style: italic;
  letter-spacing: -.015em;
  line-height: 1.42;
}

.text-link {
  display: inline-flex;
  gap: 15px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-link span { color: var(--accent); font-size: 18px; }

.folio-index {
  position: absolute;
  right: var(--pad);
  bottom: 55px;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.category-stack {
  --panel-height: clamp(460px, 42vw, 720px);
  --panel-slant: clamp(58px, 5vw, 92px);
  --panel-overlap: clamp(54px, 4.4vw, 82px);
  position: relative;
  background: var(--ink);
  margin: -1px 0;
  padding: clamp(42px, 4vw, 78px) 0;
  overflow: hidden;
  clip-path: polygon(0 clamp(18px, 1.7vw, 34px), 100% 0, 100% calc(100% - clamp(18px, 1.7vw, 34px)), 0 100%);
}

.category {
  position: relative;
  height: var(--panel-height);
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 var(--panel-slant), 100% 0, 100% calc(100% - var(--panel-slant)), 0 100%);
}

.category:nth-child(even) {
  clip-path: polygon(0 0, 100% var(--panel-slant), 100% 100%, 0 calc(100% - var(--panel-slant)));
}

.category + .category { margin-top: calc(var(--panel-overlap) * -1); }

.category-link {
  position: absolute;
  inset: 0;
  display: block;
  color: white;
  background-position: center;
  background-size: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.category--games .category-link { background-image: url("assets/games-hero.jpg"); }
.category--illustration .category-link { background-image: url("assets/illustration-hero.jpg"); background-position: center 42%; }
.category--comics .category-link { background-image: url("assets/comics-hero.jpg"); background-position: center 28%; }

.category:hover .category-link { transform: scale(1.03) rotate(.32deg); }

.category:nth-child(even):hover .category-link {
  transform: scale(1.03) rotate(-.32deg);
}

.category-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,12,14,.82) 0%, rgba(10,12,14,.36) 50%, rgba(10,12,14,.08) 100%);
  transition: background 250ms ease;
}

.category:hover .category-shade {
  background: linear-gradient(90deg, rgba(10,12,14,.86) 0%, rgba(10,12,14,.25) 56%, rgba(10,12,14,0) 100%);
}

.category-number {
  position: absolute;
  top: 25%;
  right: var(--pad);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  border-top: 2px solid var(--accent);
  padding-top: 8px;
}

.category-copy {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform: translateY(-45%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.category--games .category-copy { top: 43%; }

.category-kicker,
.category-action {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.category-kicker { margin-bottom: 20px; color: rgba(255,255,255,.72); }

.category-copy strong {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: clamp(48px, 8vw, 125px);
  line-height: .84;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.category-copy strong::before,
.category-copy strong::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 1;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
}

.category-copy strong::before { color: #16cfe0; }
.category-copy strong::after { color: #ff315d; }

.category:hover .category-copy strong::before,
.category:focus-within .category-copy strong::before {
  animation: category-glitch-a 520ms steps(2, end) both;
}

.category:hover .category-copy strong::after,
.category:focus-within .category-copy strong::after {
  animation: category-glitch-b 520ms steps(2, end) both;
}

@keyframes category-glitch-a {
  0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  12% { opacity: .82; transform: translate(-5px, 2px); clip-path: inset(7% 0 65% 0); }
  27% { opacity: .48; transform: translate(4px, -1px); clip-path: inset(61% 0 11% 0); }
  43% { opacity: .7; transform: translate(-2px, 0); clip-path: inset(34% 0 39% 0); }
  58%, 86% { opacity: 0; transform: translate(0); }
}

@keyframes category-glitch-b {
  0%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  18% { opacity: .45; transform: translate(5px, -1px); clip-path: inset(43% 0 27% 0); }
  34% { opacity: .72; transform: translate(-3px, 2px); clip-path: inset(16% 0 67% 0); }
  49% { opacity: .42; transform: translate(3px, 0); clip-path: inset(73% 0 6% 0); }
  66%, 90% { opacity: 0; transform: translate(0); }
}

.category-action {
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}

.category-action b { margin-left: 13px; color: var(--accent); font-size: 16px; }

.statement {
  padding: 120px var(--pad) 150px;
  border-top: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  gap: clamp(70px, 10vw, 170px);
  align-items: start;
}

.about-copy h2 {
  max-width: 900px;
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(34px, 4.4vw, 70px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-shadow: var(--emboss-shadow);
}

.about-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 38px 0 0;
  color: var(--muted);
  font-family: var(--font-editorial);
  font-size: clamp(16px, 1.35vw, 21px);
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.6;
}

.about-copy .collaborations { padding-top: 28px; border-top: 1px solid var(--line); }
.about-copy .collaborations strong { color: var(--ink); }

.awards {
  padding-top: 4px;
}

.awards-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: awards;
  border-top: 1px solid var(--line);
}

.awards-list li {
  counter-increment: awards;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 22px 38px;
  border-bottom: 1px solid var(--line);
}

.awards-list li::before {
  content: counter(awards, decimal-leading-zero);
  position: absolute;
  top: 24px;
  left: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.awards-list strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.awards-list span {
  color: var(--muted);
  font-family: var(--font-editorial);
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 800px) {
  .site-header { align-items: flex-start; }
  .brand { width: 211px; height: auto; margin-top: 5px; }
  nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 22px; }
  .intro { min-height: 760px; padding-top: 210px; }
  .intro h1 { font-size: clamp(52px, 15vw, 88px); }
  .folio-index { display: none; }
  .category-stack {
    --panel-height: 520px;
    --panel-slant: clamp(44px, 10vw, 70px);
    --panel-overlap: clamp(42px, 8vw, 64px);
    padding: 34px 0;
  }
  .category { margin: 0; }
  .category-copy strong { font-size: clamp(48px, 14vw, 80px); }
  .category-number { top: 22%; }
  .statement { padding-top: 90px; padding-bottom: 110px; }
  .about-grid { grid-template-columns: 1fr; gap: 80px; }
  .about-copy > p:not(.eyebrow) { max-width: 640px; }
}

@media (max-width: 480px) {
  .site-header { padding-top: 20px; }
  .brand { width: 176px; height: auto; margin-top: 4px; }
  nav a { font-size: 9px; }
  .intro { min-height: 690px; }
  .intro-identity { font-size: 8px; letter-spacing: .1em; }
  .intro-copy { margin-top: 32px; }
  .category-stack { --panel-height: 450px; --panel-overlap: 44px; }
  .category-kicker { max-width: 220px; line-height: 1.5; }
  .statement { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Persistent quick navigation */
.floating-nav {
  position: fixed;
  z-index: 40;
  right: clamp(14px, 2.2vw, 34px);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(20, 21, 23, .88);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.floating-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.floating-nav a:hover,
.floating-nav a:focus-visible {
  color: #17181a;
  background: var(--accent, #f47a20);
  transform: translateY(-1px);
}

.floating-nav__top span {
  margin-left: 7px;
  font-size: 13px;
}

@media (max-width: 520px) {
  .floating-nav {
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    justify-content: stretch;
    transform: translateX(50%);
  }
  .floating-nav a { flex: 1; padding-inline: 10px; }
}