@font-face { font-family: "Luckiest Guy"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/luckiest-guy.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-500.woff2") format("woff2"); }

/* Layout: one long descent from sunset to night. Sky (hero, flock) -> sun band (how it works) -> dusk skyline (fusion, caps) -> night graveyard (graveyard, contract, faq). Ink-outlined sticker panels with hard offset shadows, like the outlines in the art. */
:root {
  --sky: #f5e8cf;
  --paper: #fff8ea;
  --sun: #ef8a3d;
  --beak: #f5b840;
  --flesh: #c9707a;
  --candle: #d6402e;
  --dusk: #1e3644;
  --night: #14151b;
  --ink: #1d1e26;
  --ink-soft: #5d5049;
  --fog: #aab6be;
  --display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 var(--step-0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(56px, 8vw, 104px); }
:focus-visible { outline: 3px solid var(--beak); outline-offset: 3px; }

/* headline lettering: paper fill, ink outline, hard drop like the logo */
.title { font: 400 var(--step-3)/0.95 var(--display); color: var(--paper); margin: 0; letter-spacing: 0.01em; text-wrap: balance;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 6px 7px 0 var(--ink); }
.eyebrow { font: 500 var(--step--1)/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 14px; }
.eyebrow.red { color: var(--candle); }
.eyebrow.gold { color: var(--beak); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 60ch; margin: 18px 0 0; }

/* sticky bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--sky); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--sky); border-bottom: 3px solid var(--ink); }
.bar .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.25rem/1 var(--display); letter-spacing: 0.02em; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); }
.nav { display: flex; gap: 22px; font: 600 0.95rem/1 var(--body); }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--ink); }
@media (max-width: 860px) { .nav { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 400 1.15rem/1 var(--display); letter-spacing: 0.03em;
  text-decoration: none; color: var(--ink); background: var(--sun); border: 3px solid var(--ink); border-radius: 12px; padding: 14px 22px 12px;
  box-shadow: var(--shadow); cursor: pointer; }
.btn.small { font-size: 1rem; padding: 10px 16px 8px; box-shadow: 3px 3px 0 var(--ink); }
.btn.alt { background: var(--paper); }
.btn:hover { background: var(--beak); }

/* hero */
.hero { background: var(--sky); padding-bottom: clamp(40px, 6vw, 72px); }
.hero-art { border-bottom: 3px solid var(--ink); background: var(--sky); }
.hero-art img { width: 100%; height: auto; max-height: 640px; object-fit: cover; object-position: 50% 40%; }
.hero-narrow { display: none; text-align: center; padding-top: 24px; }
.hero-narrow .logo { width: min(440px, 92%); margin: 0 auto; }
.hero-narrow .tag { font: 400 var(--step-1)/1.2 var(--display); margin: 8px 0 20px; }
@media (max-width: 720px) {
  .hero-narrow { display: block; }
  .hero-art img { max-height: none; aspect-ratio: 16 / 9; }
}

.ticket { position: relative; margin-top: clamp(-64px, -5vw, -24px); background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 28px; padding: clamp(20px, 3vw, 32px); align-items: center; }
@media (max-width: 980px) { .ticket { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ticket { margin-top: 20px; } }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--step--1)/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--ink); color: var(--paper); padding: 7px 11px; border-radius: 999px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--beak); }
.status.live i { background: #6fdc8c; }
.status.closed i { background: var(--candle); }
.count { display: flex; gap: 10px; margin: 16px 0 10px; flex-wrap: wrap; }
.count div { background: var(--sky); border: 3px solid var(--ink); border-radius: 12px; min-width: 76px; padding: 10px 8px 6px; text-align: center; }
@media (max-width: 480px) { .count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .count div { min-width: 0; padding: 8px 4px 5px; } .count span { font-size: 0.62rem; letter-spacing: 0.08em; } }
.count b { display: block; font: 400 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--display); }
.count span { font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.when { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; font-size: 0.98rem; }
.facts dt { font: 500 var(--step--1)/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 700; }
.mint { display: grid; gap: 12px; justify-items: center; text-align: center; }
.mint .btn { font-size: 1.4rem; padding: 18px 28px 15px; }
.minted { font: 500 var(--step--1)/1.3 var(--mono); color: var(--ink-soft); margin: 0; }
.minted b { color: var(--ink); }

/* ticker */
.ticker { background: var(--candle); border-block: 3px solid var(--ink); }
.ticker ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; list-style: none; margin: 0 auto; max-width: 1180px; padding-block: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  font: 400 1.05rem/1.2 var(--display); letter-spacing: 0.04em; color: var(--paper); }
.ticker li span { color: var(--ink); }

/* story */
.story { background: var(--sky); }
.story .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.story .title { color: var(--paper); }
.story p { max-width: 58ch; }
.portrait { justify-self: center; width: min(400px, 100%); border: 3px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-lg); transform: rotate(-3deg); background: var(--dusk); }
@media (max-width: 820px) { .story .wrap { grid-template-columns: minmax(0, 1fr); } .portrait { width: min(240px, 66%); order: -1; } }

/* flock */
.flock { background: var(--sky); padding-top: 0; }
.flock-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.flock-head .note { margin: 14px 0 0; max-width: 56ch; color: var(--ink-soft); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: 32px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { margin: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.card img { width: 100%; aspect-ratio: 1; border-bottom: 3px solid var(--ink); background: var(--sky); }
.card figcaption { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; }
.card .who { font: 500 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 600 0.78rem/1.2 var(--body); background: var(--sky); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 8px; }
.chip.rare { background: var(--beak); }
.live-row { margin-top: 44px; }
.live-row h3 { font: 400 var(--step-2)/1 var(--display); margin: 0; }

/* how it works */
.how { background: var(--sun); }
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 20px; display: grid; align-content: start; gap: 10px; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--beak); font: 400 1.4rem/1 var(--display); padding-top: 4px; }
.steps h3 { font: 400 1.7rem/1 var(--display); margin: 4px 0 0; }
.steps p { margin: 0; }

/* skyline into dusk */
.skyline { display: block; width: 100%; height: clamp(60px, 9vw, 140px); background: var(--sun); }
.skyline path { fill: var(--dusk); }

/* fusion ladder */
.ladder { background: var(--dusk); color: var(--paper); padding-top: clamp(24px, 4vw, 48px); }
.ladder .lede, .caps .lede { color: var(--fog); }
.rungs { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; }
.rung { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 #0c1820; padding: 16px 14px; display: grid; gap: 8px; }
.rung .lvl { font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.rung h3 { font: 400 1.3rem/1.05 var(--display); margin: 0; }
.rung p { margin: 0; font-size: 0.9rem; }
.rung .deep { font: 500 0.8rem/1.3 var(--mono); border-top: 2px dashed var(--ink); padding-top: 8px; }
.rung .live { font: 500 0.78rem/1.2 var(--mono); color: var(--ink-soft); }
.rung:nth-child(1) { margin-bottom: 0; }
.rung:nth-child(2) { margin-bottom: 26px; }
.rung:nth-child(3) { margin-bottom: 52px; }
.rung:nth-child(4) { margin-bottom: 78px; }
.rung:nth-child(5) { margin-bottom: 104px; }
.rung:nth-child(6) { margin-bottom: 130px; background: var(--beak); }
@media (max-width: 980px) {
  .rungs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .rung:nth-child(n) { margin-bottom: 0; }
}
@media (max-width: 560px) { .rungs { grid-template-columns: minmax(0, 1fr); } }
.nouns { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .nouns { grid-template-columns: minmax(0, 1fr); } }
.nouns div { border: 2px dashed var(--fog); border-radius: 12px; padding: 14px 16px; color: var(--fog); }
.nouns b { font: 400 1.2rem/1 var(--display); color: var(--beak); display: block; margin-bottom: 6px; letter-spacing: 0.02em; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 500 var(--step--1)/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid currentColor; border-radius: 999px; padding: 8px 12px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--beak); }
.pill.on i { background: #6fdc8c; }

/* caps */
.caps { background: var(--dusk); color: var(--paper); padding-top: 0; }
.caplist { margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .caplist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .caplist { grid-template-columns: minmax(0, 1fr); } }
.cap.unique { background: transparent; border-style: dashed; border-color: var(--beak); }
.cap.unique b { color: var(--beak); }
.cap { background: #173040; border: 2px solid #33505f; border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; }
.cap-top { display: grid; gap: 6px; }
.cap-top b { font: 400 1.25rem/1 var(--display); letter-spacing: 0.02em; }
.cap-top span { font: 500 0.85rem/1 var(--mono); color: var(--fog); font-variant-numeric: tabular-nums; }
.meter { height: 10px; border-radius: 999px; background: #0d1d27; overflow: hidden; border: 2px solid #0d1d27; }
.meter i { display: block; height: 100%; width: 0; background: var(--beak); border-radius: 999px; }

/* graveyard */
.stones { display: block; width: 100%; height: clamp(40px, 6vw, 90px); background: var(--dusk); }
.stones path { fill: var(--night); }
.graveyard { background: var(--night); color: var(--paper); }
.graveyard .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .graveyard .wrap { grid-template-columns: minmax(0, 1fr); } }
.graveyard .lede { color: var(--fog); }
.meals { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.meals li { display: flex; gap: 12px; align-items: baseline; }
.meals b { font: 400 1.5rem/1 var(--display); color: var(--candle); min-width: 2.2ch; }
.feast { margin: 0; border: 3px solid var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 8px 8px 0 var(--candle); }
.feast img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* contract facts */
.chain { background: var(--night); color: var(--paper); padding-top: 0; }
.specs { margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid #3a3d4a; border-radius: 16px; overflow: hidden; }
@media (max-width: 900px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .specs { grid-template-columns: minmax(0, 1fr); } }
.specs div { padding: 18px 20px; border-right: 2px solid #3a3d4a; border-bottom: 2px solid #3a3d4a; margin: 0 -2px -2px 0; min-width: 0; }
.specs dt { font: 500 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fog); margin-bottom: 8px; }
.specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 26px; background: #1d1f28; border: 2px solid #3a3d4a; border-radius: 14px; padding: 14px 16px; }
.addr code { font: 500 0.95rem/1.4 var(--mono); overflow-wrap: anywhere; min-width: 0; flex: 1 1 280px; }
.addr button, .addr a { font: 600 0.9rem/1 var(--body); color: var(--ink); background: var(--beak); border: 2px solid var(--ink); border-radius: 10px; padding: 9px 12px; cursor: pointer; text-decoration: none; }

/* faq */
.faq { background: var(--night); color: var(--paper); padding-top: 0; }
.faq-list { margin-top: 30px; display: grid; gap: 12px; max-width: 860px; }
.faq details { border: 2px solid #3a3d4a; border-radius: 14px; padding: 16px 20px; background: #1a1b22; }
.faq summary { cursor: pointer; font: 400 1.25rem/1.2 var(--display); letter-spacing: 0.02em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--beak); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--fog); max-width: 64ch; }

/* footer */
.foot { background: var(--night); color: var(--fog); border-top: 3px solid #2a2c36; padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.foot img { width: 180px; height: auto; }
.links { display: flex; gap: 10px; flex-wrap: wrap; }
.links a { font: 600 0.92rem/1 var(--body); color: var(--paper); text-decoration: none; border: 2px solid #3a3d4a; border-radius: 999px; padding: 10px 14px; }
.links a:hover { border-color: var(--beak); color: var(--beak); }
.foot small { flex-basis: 100%; font-size: 0.85rem; }