/* RobbingHood
   The palette is sampled straight out of the art: the lime is the background
   the character was rendered on, the green is his money bag, the navy is the
   manhole render and the blue is the shark water. Nothing here is invented. */

:root {
  --lime:  #cff021;
  --lime-d:#a8c518;
  --ink:   #0b0b0b;
  --money: #1a7a2e;
  --blue:  #1e97ff;
  --navy:  #021a47;
  --cream: #fff8e7;
  --red:   #e1261c;
  --skin:  #f7c5bd;

  --edge: 4px;
  --pop: 8px 8px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);

  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --meme: "Anton", Impact, "Arial Black", sans-serif;

  --bar-h: 68px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); }

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto matters: every img carries its intrinsic width/height so the
   layout does not jump while it loads, and without this the hero stretches. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
}

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--lime);
  padding: 12px 18px;
  font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: var(--edge) solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--pop-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--big { font-size: 18px; padding: 16px 26px; box-shadow: var(--pop); }
.btn--big:hover { box-shadow: 11px 11px 0 var(--ink); }
.btn--big:active { box-shadow: 2px 2px 0 var(--ink); }

.btn--ghost { background: var(--lime); }
.btn--ink { background: var(--ink); color: var(--lime); }
.btn--ink:hover { background: #1c1c1c; }

/* ------------------------------------------------------------------- bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: var(--lime);
  border-bottom: var(--edge) solid var(--ink);
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.bar__mark img { border: 3px solid var(--ink); border-radius: 50%; }

.bar__nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.bar__nav a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid transparent; }
.bar__nav a:hover { border-bottom-color: var(--ink); }

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 56px;
}

.wordmark {
  /* Capped so the longest line, ROBBING, still clears the hero art column. */
  font-size: clamp(3.2rem, 8.2vw, 7rem);
  letter-spacing: -0.045em;
  text-shadow:
     6px 6px 0 var(--money),
    12px 12px 0 var(--ink);
}

.hero__sub {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 500;
  max-width: 34ch;
  margin: 28px 0 0;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__note {
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: .72;
}

.hero__art img {
  border: 6px solid var(--ink);
  box-shadow: 16px 16px 0 var(--ink);
  transform: rotate(-2deg);
}

/* ---------------------------------------------------------------- ticker */

.ticker {
  background: var(--ink);
  color: var(--lime);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  overflow: hidden;
  padding: 14px 0;
}

.ticker__track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: slide 26s linear infinite;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.ticker__track i { color: var(--money); font-style: normal; }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------- sections */

.section-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 34px;
}
.section-head h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.section-head p {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: 1.08rem;
  font-weight: 500;
}
.section-head--light h2 { text-shadow: 5px 5px 0 var(--blue); }
.section-head--dark h2 { text-shadow: 5px 5px 0 var(--money); }

/* The banner row's own heading, a step down from a section title. */
.section-head--sub { padding-top: 64px; }
.section-head--sub h3 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

.vault { padding: 72px 0 84px; }

/* ----------------------------------------------------------------- wide */

/* Black, between two lime sections. The widescreen art is mostly lime
   itself, so a dark band is what makes it read as a separate shelf rather
   than more of the vault. */
.wide {
  background: var(--ink);
  color: var(--cream);
  border-top: var(--edge) solid var(--ink);
  padding: 76px 0 88px;
}
.wide .section-head h2,
.wide .section-head h3 { color: var(--lime); }
.wide .section-head p { opacity: .8; }


.banners {
  list-style: none;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px;
}

/* ----------------------------------------------------------------- grid */

.grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 26px;
}

/* Wider tracks: a 16:9 card at 270px is a postage stamp. Declared after
   .grid so it wins on source order rather than on specificity. */
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

.card {
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  box-shadow: var(--pop);
  display: flex;
  flex-direction: column;
  transition: transform .1s ease, box-shadow .1s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }

.card__shot {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  border-bottom: var(--edge) solid var(--ink);
}
/* No forced aspect: each gallery holds one shape, and the width/height
   attributes on the img already reserve the right box while it loads. */
.card__shot img { width: 100%; }

.card__n {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--display);
  font-size: 14px;
  padding: 4px 9px;
}

.card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  /* The card is cream wherever it lands, including on the black wide band,
     so it names its own text colour instead of inheriting the section's. */
  color: var(--ink);
}
.card__body h3 { font-size: 1.35rem; }
.card__body p { margin: 0; font-size: 15px; font-weight: 500; }

.card__acts { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; }
.card__acts .btn { flex: 1; font-size: 13px; padding: 9px 8px; }

/* ---------------------------------------------------------------- maker */

.maker {
  background: var(--cream);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  padding: 72px 0 84px;
}

.maker__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 40px;
  align-items: start;
}

.maker__stage canvas {
  width: 100%;
  height: auto;
  border: 6px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  background: var(--lime);
}

.maker__panel { display: flex; flex-direction: column; gap: 22px; }

.field { display: block; border: 0; padding: 0; margin: 0; }
.field legend, .field__label {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  padding: 0;
}
.field__label output { color: var(--money); }

.input {
  width: 100%;
  border: var(--edge) solid var(--ink);
  background: #fff;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: var(--pop-sm);
}
.input:focus { outline: none; box-shadow: 4px 4px 0 var(--blue); }

.range {
  width: 100%;
  appearance: none;
  height: 14px;
  background: #fff;
  border: 3px solid var(--ink);
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 26px; height: 26px;
  background: var(--money);
  border: 3px solid var(--ink);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 26px; height: 26px;
  background: var(--money);
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: grab;
}

.picker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.picker button {
  padding: 0;
  border: 3px solid var(--ink);
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
  line-height: 0;
}
.picker button img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.picker { max-height: 260px; overflow-y: auto; }
.picker button[aria-pressed="true"] {
  outline: 4px solid var(--money);
  outline-offset: 2px;
}

.maker__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.maker__actions .btn { flex: 1; }

.maker__hint {
  margin: 0;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}

/* ---------------------------------------------------------------- heist */

.heist {
  background: var(--navy);
  color: var(--cream);
  padding: 76px 0 88px;
}
.heist .section-head p { opacity: .82; }

.steps {
  list-style: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.step {
  border: var(--edge) solid var(--lime);
  background: rgba(255, 255, 255, .05);
  padding: 26px 24px 28px;
  position: relative;
}
.step__n {
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--lime);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.5rem; margin-bottom: 10px; }
.step p { margin: 0; font-weight: 500; opacity: .88; }

/* --------------------------------------------------------------- launch */

.launch {
  background: var(--lime);
  border-top: var(--edge) solid var(--ink);
  padding: 76px 0 88px;
}
.launch .section-head h2 { text-shadow: 5px 5px 0 var(--money); }
.launch .section-head p + p { margin-top: 12px; }

.launch__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 40px;
  align-items: start;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--edge) solid var(--ink);
  background: var(--cream);
  box-shadow: var(--pop);
}
.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 3px solid var(--ink);
}
.facts li:last-child { border-bottom: 0; }
.facts span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: .65;
}
.facts strong { font-weight: 700; text-align: right; }

/* The quote token is the joke, so it gets the top row and the loud one. */
.facts__key { background: var(--lime); }
.facts__key span { opacity: 1; }
.facts__key strong {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.launch__act { display: flex; flex-direction: column; gap: 18px; }
.launch__act .btn { align-self: start; }

/* The one live/not-live signal on the page, driven by the header's data-ca. */
.launch__state {
  margin: 0;
  border: var(--edge) solid var(--ink);
  background: var(--ink);
  color: var(--lime);
  padding: 16px 18px;
  font-weight: 700;
  box-shadow: var(--pop-sm);
  /* anywhere, not break-all: a base58 address has no break points and must
     wrap, but the not-live sentence beside it is ordinary prose and should
     not be cut mid-word. */
  overflow-wrap: anywhere;
}
.launch__state a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.launch__state b {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cream);
  opacity: .6;
  margin-bottom: 6px;
}

.launch__fine { margin: 0; font-size: 14px; font-weight: 500; opacity: .72; }
.launch__fine a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- foot */

.foot {
  background: var(--ink);
  color: var(--cream);
  padding: 44px 24px 52px;
}
.foot__row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.foot__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
}
.foot__mark img { border: 3px solid var(--lime); border-radius: 50%; }

.foot__links { display: flex; gap: 10px; }
.foot__links a {
  border: 3px solid var(--lime);
  color: var(--lime);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding: 8px 16px;
}
.foot__links a:hover { background: var(--lime); color: var(--ink); }

.foot__fine {
  max-width: 1280px;
  margin: 34px auto 0;
  font-size: 13px;
  opacity: .6;
  max-width: 70ch;
}

/* ------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11, 11, 11, .93);
  display: grid;
  place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: center;
  max-width: 1080px;
  width: 100%;
}
/* width auto, not 100%: with a fixed width the frame would sit out at the
   column edge while the art letterboxed inside it. */
.lightbox__figure img {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  justify-self: center;
  border: 5px solid var(--lime);
}
.lightbox__figure figcaption { color: var(--cream); }
.lightbox__figure h3 { font-size: 2rem; color: var(--lime); margin-bottom: 12px; }
.lightbox__figure p { margin: 0 0 22px; font-weight: 500; }
.lightbox__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: 3px solid var(--lime);
  background: var(--ink);
  color: var(--lime);
  cursor: pointer;
  font-family: var(--display);
  line-height: 1;
}
.lightbox__close { top: 18px; right: 18px; width: 48px; height: 48px; font-size: 28px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 64px; font-size: 34px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--lime); color: var(--ink); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 140%);
  z-index: 80;
  background: var(--ink);
  color: var(--lime);
  border: 3px solid var(--lime);
  padding: 13px 22px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.4);
  pointer-events: none;
}
.toast.is-up { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; gap: 34px; }
  .hero__art { order: -1; }
  .hero__art img { transform: none; box-shadow: 10px 10px 0 var(--ink); }
  .wordmark { text-shadow: 4px 4px 0 var(--money), 8px 8px 0 var(--ink); }
  .maker__body { grid-template-columns: 1fr; }
  .launch__body { grid-template-columns: 1fr; }
  .lightbox__figure { grid-template-columns: 1fr; }
  .lightbox__figure img { max-height: 52vh; }
  .lightbox__nav { top: auto; bottom: 20px; transform: none; }
}

@media (max-width: 560px) {
  .bar { gap: 10px; padding: 0 12px; }
  .bar__mark span { display: none; }
  .bar__nav { gap: 14px; font-size: 13px; }
  .ticker__track { font-size: 17px; }
  .grid, .grid--wide, .banners { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .grid--wide, .banners { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  * { transition-duration: .01ms !important; }
}