@font-face { font-family: "Gloock"; src: url("/fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gochi Hand"; src: url("/fonts/gochihand-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --paper: #efe6d3;
  --ink: #15183d;
  --cobalt: #2c43d4;
  --cobalt-deep: #1f33b0;
  --pink: #ec8479;
  --star: #f6cc3b;
  --cream: #fbf5e8;
  --muted: #4a4f78;
  --display: "Gloock", "Georgia", "Times New Roman", serif;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper) url("/img/paper.jpg") repeat;
  background-size: 400px 400px;
  color: var(--ink);
  font: 500 17px/1.5 var(--sans);
  font-synthesis: none;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; border-radius: 6px; }

/* ---------- the poster ---------- */
.poster {
  position: relative;
  min-height: calc(100svh - 104px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(8px, 2vw, 40px);
  padding: clamp(28px, 5vh, 64px) var(--gutter) clamp(24px, 4vh, 48px);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.lockup { position: relative; z-index: 2; max-width: 760px; }

.eyebrow {
  font: 700 14px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

.name {
  margin: 0;
  font: 400 clamp(54px, min(8.6vw, 13.6svh), 168px)/.86 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.name .w { display: block; }
.name .comma { color: var(--cobalt); }

.aside {
  margin-top: clamp(10px, 1.6vh, 18px);
  font: 400 clamp(20px, 1.6vw, 26px)/1.2 var(--hand);
  color: var(--muted);
}

.tagline {
  margin-top: clamp(8px, 1.4vh, 16px);
  font: 400 clamp(32px, min(3.1vw, 5.6svh), 56px)/1.02 var(--hand);
  color: var(--cobalt);
  text-wrap: balance;
}

/* ---------- robe patches: links and keys cut from the wizard's cloth ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3.4vh, 36px);
}
.patch {
  --lift: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  border: 0;
  border-radius: 14px 10px 16px 9px;
  background: var(--ink) url("/img/cloth.webp") center / 520px auto;
  color: var(--cream);
  font: 700 18px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #0c0e28, 0 10px 18px rgba(21, 24, 61, .22);
  transform: translateY(var(--lift));
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.patch::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed rgba(246, 204, 59, .75);
  border-radius: inherit;
  pointer-events: none;
}
.patch:hover { --lift: -2px; box-shadow: 0 7px 0 #0c0e28, 0 14px 22px rgba(21, 24, 61, .25); }
.patch:active { --lift: 4px; box-shadow: 0 1px 0 #0c0e28, 0 4px 8px rgba(21, 24, 61, .2); }
.patch img { flex: none; }
.patch-buy { padding: 0 26px 0 16px; min-width: 250px; white-space: nowrap; }
.patch-buy img { width: 30px; height: 30px; border-radius: 7px; }
.patch-mark { width: 56px; padding: 0; }
.patch-mark img { width: 26px; height: 26px; object-fit: contain; }
#dex img { width: 30px; height: 30px; border-radius: 7px; }
.patch[aria-disabled="true"], .patch:disabled {
  filter: saturate(.35) brightness(.85);
  opacity: .62;
  cursor: not-allowed;
  --lift: 0px !important;
  box-shadow: 0 3px 0 #0c0e28;
}
.soon {
  margin-left: 6px;
  font: 400 20px/1.1 var(--hand);
  color: var(--muted);
}
.soon[hidden] { display: none; }

.contract {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  margin-top: clamp(18px, 3vh, 30px);
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  position: relative;
  max-width: 640px;
}
.contract-label { font: 400 24px/1 var(--hand); color: var(--cobalt); }
.contract-addr {
  font: 600 16px/1.35 var(--sans);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.contract-addr[data-empty="true"] { font-weight: 500; color: var(--muted); user-select: text; -webkit-user-select: text; }
.patch-copy { min-width: 88px; padding: 0 18px; font-size: 17px; min-height: 48px; }
.copy-state { grid-column: 1 / -1; min-height: 2.4em; font: 400 19px/1.2 var(--hand); color: var(--cobalt); }
.copy-state.bad { color: #b0302a; }

/* ---------- the brain's world, bleeding into the paper ---------- */
.scene {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
}
.scene-video {
  width: min(100%, calc(100svh - 150px), 980px);
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 90% 50% at 100% 52%, #000 52%, rgba(0,0,0,.6) 74%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 50% at 100% 52%, #000 52%, rgba(0,0,0,.6) 74%, transparent 100%);
  pointer-events: none;
}

/* ---------- the ribbon of verbs ---------- */
.ribbon {
  --s: 18px;
  position: relative;
  z-index: 3;
  margin-top: -8px;
  -webkit-mask:
    radial-gradient(var(--s) at 50% var(--s), #000 99%, #0000 101%) calc(50% - 2 * var(--s)) 0 / calc(4 * var(--s)) 100%,
    radial-gradient(var(--s) at 50% calc(-1 * var(--s)), #0000 99%, #000 101%) 50% var(--s) / calc(4 * var(--s)) 100% repeat-x;
          mask:
    radial-gradient(var(--s) at 50% var(--s), #000 99%, #0000 101%) calc(50% - 2 * var(--s)) 0 / calc(4 * var(--s)) 100%,
    radial-gradient(var(--s) at 50% calc(-1 * var(--s)), #0000 99%, #000 101%) 50% var(--s) / calc(4 * var(--s)) 100% repeat-x;
}
.ribbon-in {
  position: relative;
  display: flex;
  align-items: center;
  height: 112px;
  padding-top: 18px;
  background: var(--cobalt);
  overflow: hidden;
}
.ribbon-track {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-left: 26px;
  white-space: nowrap;
  font: 400 clamp(34px, 3.2vw, 46px)/1 var(--hand);
  color: var(--cream);
  animation: crawl 42s linear infinite;
  will-change: transform;
}
.ribbon-track i { font-style: normal; color: var(--star); font-size: .8em; }
@keyframes crawl { to { transform: translateX(-50%); } }
.ribbon.still .ribbon-track { animation-play-state: paused; }
.hold {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: calc(50% + 9px);
  transform: translateY(-50%);
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--cream);
  border-radius: 999px;
  background: var(--cobalt-deep);
  color: var(--cream);
  font: 400 21px/1 var(--hand);
  cursor: pointer;
}
.hold:hover { background: var(--ink); }
.hold[aria-pressed="true"] { background: var(--cream); color: var(--cobalt-deep); }

/* ---------- the work ---------- */
.work {
  padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(56px, 10vh, 120px);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  max-width: 1560px;
  margin: 0 auto;
}
.work-h {
  margin: 0 0 clamp(24px, 4vh, 44px);
  font: 400 clamp(40px, 5.4vw, 96px)/.95 var(--display);
  letter-spacing: -.015em;
  text-align: center;
}
.reel { margin: 0 auto clamp(20px, 3vw, 36px); }
.reel-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--ink);
  box-shadow: 0 18px 40px rgba(21, 24, 61, .22);
}
.pins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.pin img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 1054;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(21, 24, 61, .18);
}
.pin p {
  margin-top: 12px;
  text-align: center;
  font: 400 clamp(24px, 2vw, 32px)/1.1 var(--hand);
  color: var(--cobalt);
}

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .poster { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
  .lockup { display: contents; }
  .eyebrow { order: 1; }
  .name { order: 2; }
  .aside { order: 3; }
  .tagline { order: 4; }
  .scene { order: 5; margin: 0 -16px 0 0; }
  .scene-video { width: min(100%, 560px); }
  .actions { order: 6; margin-top: 8px; }
  .contract { order: 7; }
  .ribbon-in { height: 98px; }
  .hold { font-size: 19px; padding: 0 14px; }
}
@media (max-width: 640px) {
  .pins { grid-template-columns: 1fr; }
  .patch-buy { flex: 1 1 auto; min-width: 0; padding: 0 14px 0 10px; gap: 9px; font-size: 17px; }
  .contract { grid-template-columns: minmax(0, 1fr) auto; }
  .contract-label { grid-column: 1 / 3; }
  .soon { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 360px) {
  .name { font-size: 48px; }
  .tagline { font-size: 30px; }
  .eyebrow { font-size: 13px; letter-spacing: .08em; }
  .patch-buy { flex: 1 1 100%; }
  .patch-mark { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
  .patch { transition: none; }
}