/* Elytics v2: a newspaper of the Elysium chain. Paper, ink, one red. */
@font-face { font-family: "Instrument"; src: url(/assets/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument"; font-style: italic; src: url(/assets/fonts/instrument-serif-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "DMMono"; src: url(/assets/fonts/dm-mono.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* colours of the Elytics logo: deep navy, a cyan-to-teal line that glows */
  --paper: #0f151e; --paper2: #172030; --ink: #e9f0f6; --body: #c3cdd9; --mut: #8f9cae; --dim: #66748a;
  --hair: rgba(200, 220, 240, .13); --red: #2fd6d0; --green: #2fe3c8; --down: #ff7a85;
  --cyan: #1fb8e1; --teal: #2fe3c8; --line: linear-gradient(90deg, #1fb8e1, #2fe3c8);
  --hd: "Instrument", "Iowan Old Style", Georgia, serif;
  --tx: "Newsreader", Georgia, "Times New Roman", serif;
  --mo: "DMMono", ui-monospace, Menlo, Consolas, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }
body { background: var(--paper); background-image: radial-gradient(70% 45% at 50% -8%, rgba(31,184,225,.10), transparent 70%); color: var(--ink); font: 400 17px/1.55 var(--tx); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
code { font-family: var(--mo); }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(var(--gl), 3vw); padding-right: max(var(--gr), 3vw); }

/* top strip */
.strip { border-bottom: 1px solid rgba(200,220,240,.32); font: 500 11.5px var(--mo); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding-top: env(safe-area-inset-top, 0px); }
.strip-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.live { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }
.tk b { color: var(--red); font-weight: 500; }
@media (max-width: 640px) { .strip-in .date { display: none; } .strip { font-size: 10.5px; } }

/* masthead */
.mast { text-align: center; padding: 18px 0 12px; border-bottom: 3px double rgba(200,220,240,.45); }
.name { font: 400 clamp(60px, 9vw, 112px)/1 var(--hd); letter-spacing: -.01em; display: inline-block; }
.name em, .f-name em { font-style: italic; background: var(--line); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(47,227,200,.25)); }
.name { display: inline-flex; align-items: center; gap: .18em; }
.name img { width: .62em; height: .62em; border-radius: .14em; box-shadow: 0 0 30px rgba(31,184,225,.25); }
.motto { font: 500 clamp(9.5px, 1.1vw, 12px) var(--mo); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-top: 8px; }
@media (max-width: 640px) { .motto span { display: none; } .mast { padding: 12px 0 8px; } }

/* section nav */
.sections { border-bottom: 1px solid rgba(200,220,240,.32); position: sticky; top: 0; z-index: 5; background: rgba(15, 21, 30, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sections-in { display: flex; justify-content: center; gap: 34px; font: 500 12px var(--mo); letter-spacing: .1em; text-transform: uppercase; height: 42px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.sections-in::-webkit-scrollbar { display: none; }
.sections a { white-space: nowrap; flex: none; }
.sections a:hover { color: var(--red); }
.sections .ink { background: var(--line); color: #06131a; padding: 4px 10px; font-weight: 500; }
.sections .ink:hover { color: #06131a; filter: brightness(1.1); }
@media (max-width: 640px) { .sections-in { justify-content: flex-start; gap: 20px; font-size: 11px; } }

/* front page */
.front { display: grid; grid-template-columns: minmax(0, 1.55fr) 1px minmax(0, 1fr); gap: 30px; padding: 26px 0 8px; }
.vr { background: rgba(200,220,240,.25); }
.kick { font: 500 11px var(--mo); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
h1 { font: 400 clamp(36px, 4.6vw, 60px)/1.03 var(--hd); letter-spacing: -.01em; margin: 10px 0 14px; text-wrap: balance; }
h1 em { font-style: italic; }
h1 .ph { color: var(--dim); }
.story { font-size: clamp(16px, 1.4vw, 18px); color: var(--body); max-width: 660px; }
.story::first-letter { font: 400 3.3em/.8 var(--hd); float: left; margin: .1em .12em 0 0; color: var(--teal); }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(200,220,240,.32); border-bottom: 1px solid rgba(200,220,240,.32); margin-top: 22px; }
.nums div { padding: 14px 14px 12px; border-left: 1px solid var(--hair); min-width: 0; }
.nums div:first-child { border-left: 0; padding-left: 0; }
.nums b { display: block; font: 400 clamp(30px, 3.2vw, 42px)/1 var(--hd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nums span { font: 500 10.5px var(--mo); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nums small { display: block; font: 500 11px var(--mo); margin-top: 2px; }
.up { color: var(--green); } .down { color: var(--down); }
.rule { font: 500 11px var(--mo); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(200,220,240,.32); padding-bottom: 6px; margin-bottom: 10px; }
.soft { color: var(--dim); }
.live-s::before { content: "● "; color: var(--red); }
.chart { margin-top: 22px; }
.bars { display: flex; align-items: flex-end; gap: clamp(2px, .4vw, 5px); height: 130px; }
.bars i { flex: 1; background: linear-gradient(180deg, rgba(31,184,225,.75), rgba(31,184,225,.28)); min-height: 2px; position: relative; transition: height .5s ease; border-radius: 2px 2px 0 0; }
.bars i.now { background: linear-gradient(180deg, #2fe3c8, #1fb8e1); box-shadow: 0 0 18px rgba(47,227,200,.55); }
.bars i:hover { background: var(--teal); }
.bars i:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #0f151e; font: 500 11px var(--mo); padding: 3px 6px; white-space: nowrap; z-index: 2; }
.bars.wait i { background: var(--paper2); }
.axis { display: flex; justify-content: space-between; font: 500 10px var(--mo); color: var(--dim); margin-top: 5px; }
.note { font-size: 13.5px; color: var(--mut); margin-top: 8px; font-style: italic; }

/* side column */
.side section { margin-bottom: 22px; }
.rank { list-style: none; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hair); counter-increment: r; }
.rank li::before { content: counter(r); font: 500 11px var(--mo); color: var(--dim); }
.rank li.wait { display: block; color: var(--dim); font-style: italic; }
.rank li.wait::before { content: none; }
.rank b { font-weight: 600; font-size: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank small { display: block; font: 500 11px var(--mo); color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank em { font: 500 13px var(--mo); font-style: normal; white-space: nowrap; }
.tape { list-style: none; font: 500 12.5px/1 var(--mo); color: var(--body); }
.tape li { padding: 7px 0; border-bottom: 1px dotted var(--hair); display: flex; flex-wrap: wrap; gap: 4px 8px; animation: drop .4s ease both; }
.tape li.wait { color: var(--dim); font-family: var(--tx); font-style: italic; font-size: 15px; animation: none; }
.tape b { color: var(--ink); }
.tape .r { color: var(--red); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* method + token */
.method { padding: 34px 0 10px; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cols p { color: var(--body); font-size: 16px; }
.cols b { color: var(--ink); }
.token { margin: 34px 0 40px; border-top: 3px double rgba(200,220,240,.45); border-bottom: 1px solid rgba(200,220,240,.32); padding: 28px 0; }
.token-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.big { font: 400 clamp(48px, 6vw, 80px)/1 var(--hd); margin: 6px 0 10px; }
.t-lead { color: var(--body); max-width: 460px; }
.t-l { display: block; font: 500 11px var(--mo); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.ca { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(200,220,240,.32); padding: 9px 9px 9px 14px; background: var(--paper2); min-width: 0; }
.ca code { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; color: var(--mut); }
.ca.on code { color: var(--ink); }
.ca button { border: 1px solid rgba(200,220,240,.32); padding: 6px 12px; font: 500 12px var(--mo); text-transform: uppercase; letter-spacing: .06em; flex: none; }
.ca button:disabled { opacity: .35; cursor: default; }
.t-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(200,220,240,.32); padding: 12px 18px; font: 500 12.5px var(--mo); letter-spacing: .08em; text-transform: uppercase; }
.btn.ink { background: var(--line); color: #06131a; border-color: transparent; }
.btn.ink:hover { filter: brightness(1.08); }
.btn.is-off { background: var(--paper2); color: var(--dim); border-color: var(--hair); cursor: default; filter: none; }
.btn:not(.ink):hover { border-color: var(--teal); color: var(--teal); }

/* footer */
.foot { border-top: 1px solid rgba(200,220,240,.32); padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.f-name { font: 400 28px/1 var(--hd); }
.foot p { font-size: 14px; color: var(--mut); max-width: 560px; }
.f-r { font: 500 11.5px var(--mo); color: var(--dim); }

/* phones and tablets */
@media (max-width: 920px) {
  .front { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; }
  .vr { display: none; }
  .side { margin-top: 30px; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nums div:nth-child(3) { border-left: 0; padding-left: 0; }
  .nums div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .bars { height: 96px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .token-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 380px) { .nums div { padding: 12px 8px 10px; } .nums div:nth-child(odd) { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }