:root {
  --paper: #f2efe6;
  --paper-2: #e6e2d6;
  --ink: #111111;
  --red: #d0341c;
  --red-2: #8f2413;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --comic: 'Bangers', Impact, 'Arial Black', sans-serif;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button { font-family: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

.nav {
  position: fixed; top: 14px; left: 14px; right: 14px; z-index: 70;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.brand, .nav nav {
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; display: flex; gap: 12px; align-items: center;
}
.brand .mark { width: 18px; height: 18px; }
.nav nav a { text-decoration: none; padding: 0 2px; }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--red); }

.markers {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 70;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
  font-size: 10px; letter-spacing: .1em; font-weight: 600;
}
.markers li {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  opacity: .55; transition: opacity .2s, background .2s, color .2s;
}
.markers li.on { opacity: 1; background: var(--red); color: var(--paper); }
.markers { transition: opacity .3s; }
.markers.off { opacity: 0; pointer-events: none; }

.experience { position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; will-change: transform;
  background: var(--paper-2);
  background-image: radial-gradient(var(--ink) .5px, transparent .6px); background-size: 12px 12px;
}
.layer { position: absolute; will-change: transform, opacity; transform-origin: 50% 50%; }
.layer[hidden] { display: none; }

.panel {
  left: 14px; right: 14px; top: 14px; bottom: 14px;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 rgba(17, 17, 17, .85);
  overflow: hidden;
}
.panel .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel.strip { bottom: auto; }
.panel.dark { background: #050505; }
.panel.red { background: var(--red); }
.panel.trap { border: 0; clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); box-shadow: none; }
.panel.trap .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.panel.trap .frame polygon { fill: none; stroke: var(--ink); stroke-width: 7; }

.title-block {
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--paper); padding: 0 var(--gutter) 10vh; z-index: 2;
}
.kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--red); margin: 0 0 14px; }
.kicker.light { color: var(--paper); opacity: .8; }
.title-block h1 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(54px, 11vw, 168px); line-height: .86;
  margin: 0; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: 5px 5px 0 var(--red); display: flex; flex-direction: column;
}
.title-block h1 span:nth-child(1) { font-size: .42em; letter-spacing: .1em; text-shadow: none; margin-bottom: .18em; }
.title-block h1 span:nth-child(2) { font-style: italic; }
.title-block .sub { margin: 22px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; max-width: 420px; }
.scroll-hint { margin: 46px 0 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.scroll-hint .arrow { display: inline-block; margin-left: 8px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(6px) } }
.skip {
  position: absolute; right: 26px; bottom: 26px; z-index: 30;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--red);
  padding: 9px 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; font-weight: 600;
}
.skip:hover { background: var(--red); color: var(--paper); }

.caption {
  left: 26px; bottom: 11%; z-index: 20;
  max-width: min(500px, calc(100% - 52px));
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 14px 18px; font-size: 11.5px; line-height: 1.65; letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.caption b { display: block; color: var(--red); margin-bottom: 6px; letter-spacing: .18em; }
.caption.tr { left: auto; right: 26px; bottom: auto; top: 84px; }

.inset {
  z-index: 15; background: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: hidden;
}
.inset svg { width: 100%; height: 100%; display: block; }
.inset-hood { left: 4%; top: 13%; width: 30vw; height: 27vh; }
.inset-pupil { right: 5%; top: 14%; width: 26vw; height: 27vh; }
.inset-eyes { left: 52%; top: 14%; width: 33vw; height: 17vh; }

.wipe { left: -20px; right: -20px; top: 0; height: 300%; z-index: 25; pointer-events: none; }
.wipe svg { width: 100%; height: 100%; display: block; }

.fig [data-f] { display: none; }
.fig[data-frame="0"] [data-f="0"], .fig[data-frame="1"] [data-f="1"],
.fig[data-frame="2"] [data-f="2"], .fig[data-frame="3"] [data-f="3"] { display: inline; }

.silhouette * { fill: var(--ink); stroke: var(--ink); }
.silhouette .m-red { fill: var(--red); }
.silhouette .m-ring { stroke: #000; }
.silhouette .m-red2 { fill: var(--red-2); }
.silhouette .m-none { fill: none; }
.white * { fill: var(--paper); stroke: var(--paper); }

.onDark .m-limb { stroke: var(--paper); }
.onDark .leg-in { stroke: var(--ink); stroke-width: 5; }
.onDark .m-limb-fill { fill: var(--paper); }
.onDark [data-leg="far"] .m-limb { stroke: #b2aea1; }
.onDark [data-leg="far"] .m-limb-fill { fill: #b2aea1; }
.white .m-none { fill: none; }
.white .m-red { fill: var(--red); }
.white .m-red2 { fill: var(--red-2); }

.sfx {
  position: absolute; right: 4%; top: 12%; z-index: 4;
  font-family: var(--comic); font-size: clamp(64px, 14vw, 230px); line-height: 1;
  color: var(--paper); -webkit-text-stroke: 3px var(--ink); letter-spacing: .04em;
  transform: rotate(-9deg); opacity: 0; transition: opacity .2s; pointer-events: none;
  text-shadow: 8px 8px 0 var(--red);
}
.sfx.on { opacity: 1; animation: shake .11s steps(2, end) infinite; }
@keyframes shake { 0% { transform: rotate(-9deg) translate(0, 0) } 50% { transform: rotate(-8deg) translate(3px, -2px) } 100% { transform: rotate(-9.5deg) translate(-2px, 2px) } }

.hold {
  position: absolute; left: 50%; bottom: 31%; z-index: 4; transform: translateX(-50%);
  width: 122px; height: 122px; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  font-size: 11px; line-height: 1.35; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; user-select: none; -webkit-user-select: none; touch-action: none;
}
.hold.on { opacity: 1; pointer-events: auto; }
.hold::before {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--h, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px);
  mask: radial-gradient(circle, transparent 62px, #000 63px);
}
.hold:active { transform: translateX(-50%) translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }

.collection {

  overflow-x: clip; overflow-y: visible;
  position: relative; background: var(--paper); color: var(--ink);
  padding: 14vh var(--gutter) 12vh;
  background-image: radial-gradient(var(--ink) .6px, transparent .7px);
  background-size: 14px 14px;
}
.collection::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--paper), rgba(242, 239, 230, .86));
}
.collection > * { position: relative; }
.collection .streaks { position: absolute; left: 0; right: 0; top: -2px; width: 100%; height: 22vh; pointer-events: none; z-index: 1; }
.collection .streaks + .kicker { margin-top: 8vh; }
.collection h2, .maker h2 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(46px, 8.5vw, 124px); line-height: .9;
  margin: 0 0 .25em; letter-spacing: -.02em; text-transform: uppercase;
}
.collection h2 { text-shadow: 4px 4px 0 var(--red); }
.lede { max-width: 620px; font-size: 13.5px; margin: 0 0 8px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 44px; }
.chip {
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; cursor: pointer;
}
.chip.on, .chip:hover { background: var(--ink); color: var(--paper); }
.chip.on { background: var(--red); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 30px; max-width: 1400px; }
.card {
  --tilt: 0deg;
  background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  display: flex; flex-direction: column; position: relative;
  transform: rotate(var(--tilt));
}
.card:nth-child(3n+1) { --tilt: -.7deg; }
.card:nth-child(3n+2) { --tilt: .5deg; }
.card:nth-child(3n) { --tilt: -.3deg; }

.card:not(.in) { opacity: 0; transform: translateY(70px) rotate(calc(var(--tilt) * 5)); }
.card.in { transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, box-shadow .2s; }
.card.in:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.card.hidden { display: none; }
.card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 3px solid var(--ink); background: var(--paper);
}
.card-num { font-family: var(--comic); font-size: 36px; line-height: 1; color: var(--red); -webkit-text-stroke: 1.2px var(--ink); }
.card-type { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.card-owner { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; border: 2px solid var(--ink); padding: 3px 7px; }
.card-owner.tl { background: var(--ink); color: var(--paper); }
.card-art { border-bottom: 3px solid var(--ink); background: var(--paper); position: relative; overflow: hidden; }
.card-art svg { display: block; width: 100%; height: auto; }
.card-art .burst { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .15s; }
.card:hover .card-art .burst { opacity: 1; }
.card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-family: var(--serif); font-weight: 900; font-size: 30px; line-height: 1; margin: 0 0 10px; letter-spacing: -.01em; }
.card .summary { font-size: 13px; line-height: 1.55; margin: 0 0 10px; font-weight: 600; }
.card .desc { font-size: 12px; line-height: 1.65; margin: 0 0 16px; opacity: .82; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 2.5px solid var(--ink); margin: 0 0 18px; background: var(--paper); }
.stats div { padding: 8px 10px; border-right: 2.5px solid var(--ink); min-width: 0; }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font-size: 14px; line-height: 1.2; }
.stats span { display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
.card-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.btn {
  display: inline-block; padding: 9px 14px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink);
  text-decoration: none; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.btn.red { background: var(--red); color: var(--paper); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

.maker { position: relative; background: var(--ink); color: var(--paper); padding: 14vh var(--gutter) 0; overflow: hidden; }
.maker-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.maker h2 { text-shadow: 4px 4px 0 var(--red); }
.maker-text p { max-width: 560px; font-size: 14px; }
.maker-text b { color: var(--red); }
.maker-text .small { font-size: 11px; opacity: .6; letter-spacing: .04em; }
.maker-links { display: flex; flex-direction: column; gap: 18px; align-self: start; }
.link-card {
  position: relative; display: grid; gap: 4px; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 3px solid var(--paper); box-shadow: 7px 7px 0 var(--red);
  padding: 18px 56px 18px 20px;
}
.link-card:not(.in) { opacity: 0; transform: translateX(60px) rotate(2deg); }
.link-card.in { transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .4s ease, box-shadow .2s; }
.link-card.in:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--red); transition: transform .2s, box-shadow .2s; }
.lc-kicker { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.lc-title { font-family: var(--serif); font-weight: 900; font-size: 28px; line-height: 1; }
.lc-sub { font-size: 11px; opacity: .8; }
.lc-arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.maker-fig { display: block; width: 100%; height: auto; max-height: 46vh; margin-top: 30px; }
.maker footer {
  position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 2px solid rgba(242, 239, 230, .3); padding: 18px 0 22px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8;
}
.maker footer a { text-decoration: none; }
.maker footer a:hover { color: var(--red); }

@media (max-width: 860px) {
  .maker-inner { grid-template-columns: 1fr; gap: 28px; }
  .markers { display: none; }
  .nav nav a { padding: 0; }
  .brand span { display: none; }
  .caption { bottom: 8%; font-size: 10.5px; padding: 12px 14px; left: 16px; max-width: calc(100% - 32px); }
  .caption.tr { right: 16px; top: 70px; }
  .inset-hood { width: 56vw; height: 22vh; top: 30%; }
  .inset-pupil { width: 48vw; height: 22vh; }
  .inset-eyes { width: 66vw; height: 14vh; left: 26%; top: 12%; }
  .panel { left: 8px; right: 8px; top: 8px; bottom: 8px; box-shadow: 6px 6px 0 rgba(17,17,17,.85); }
  .sfx { top: 8%; right: 2%; }
  .grid { gap: 28px 18px; }
}
@media (max-width: 520px) {
  .nav { top: 10px; left: 10px; right: 10px; }
  .brand, .nav nav { padding: 7px 10px; font-size: 10px; gap: 8px; }
  .title-block h1 { font-size: clamp(50px, 17vw, 110px); }
  .skip { right: 12px; bottom: 12px; }
  .hold { bottom: 27%; width: 108px; height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint .arrow, .sfx.on { animation: none; }
}