/* Meme Stock Translator. One leaf of a two language dictionary, printed in two inks.
   The look is the owner's X: salmon paper, charcoal rules, a heavy serif, and the two arrows,
   electric blue for the meme language and bordeaux for the stock exchange. Flat, crisp, no grain. */

@font-face { font-family: "Playfair"; src: url("/fonts/playfair-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair"; src: url("/fonts/playfair-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "InterTight"; src: url("/fonts/intertight-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "InterTight"; src: url("/fonts/intertight-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "InterTight"; src: url("/fonts/intertight-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MartianMono"; src: url("/fonts/martianmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MartianMono"; src: url("/fonts/martianmono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #FCE9D4;
  --paper-2: #F7DEC6;
  --paper-3: #F2D2B6;
  --ink: #1F1D1B;
  --ink-2: #4B4541;
  --ink-3: #6B6058;
  --charcoal: #2D2F2E;
  --rule: #D5C1AD;
  --blue: #001FF2;
  --blue-ink: #0018BD;
  --blue-wash: #DCD9F3;
  --bord: #8E1A27;
  --bord-wash: #F1D2C8;
  --ok: #2F5D3A;

  --serif: "Playfair", "Playfair Display", Georgia, "Times New Roman", serif;
  --text: "Newsreader", Georgia, serif;
  --ui: "InterTight", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "MartianMono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --wrap: 1240px;
  --gut: 32px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 760px) { :root { --gut: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gut); top: var(--s2); z-index: 50; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); }
.noscript { max-width: 640px; margin: 15vh auto; padding: 0 var(--gut); font: 400 18px/1.6 var(--text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ------------------------------------------------------------------ the mark: his two arrows */
.mark { position: relative; display: inline-block; width: 44px; aspect-ratio: 700 / 285; flex: none; }
.mark i { position: absolute; display: block; }
.mark i:first-child {
  left: 0; top: 0; width: 100%; height: 53.7%; background: var(--blue);
  clip-path: polygon(0 31%, 83.3% 31%, 83.3% 0, 100% 50%, 83.3% 100%, 83.3% 69%, 0 69%);
}
.mark i:last-child {
  left: 5.4%; top: 52.6%; width: 83.6%; height: 47.4%; background: var(--bord);
  clip-path: polygon(100% 32%, 16.8% 32%, 16.8% 0, 0 50%, 16.8% 100%, 16.8% 68%, 100% 68%);
}
.mark--live i:first-child { animation: arrow-r 7s var(--ease) infinite; }
.mark--live i:last-child { animation: arrow-l 7s var(--ease) infinite; }
@keyframes arrow-r { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(9%); } 90% { transform: translateX(-2%); } }
@keyframes arrow-l { 0%, 72%, 100% { transform: none; } 82% { transform: translateX(-10%); } 92% { transform: translateX(2%); } }

/* ------------------------------------------------------------------ masthead */
.mast { border-top: 3px solid var(--charcoal); }
.mast__row {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s5);
  padding: var(--s4) 0 var(--s3);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; min-width: 0; }
.brand__name {
  font: 900 23px/1 var(--serif); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}
.nav { display: flex; justify-content: flex-end; gap: var(--s1); flex-wrap: wrap; }
.nav a {
  position: relative; text-decoration: none; padding: var(--s2) var(--s3);
  font: 600 15px/1.2 var(--ui); color: var(--ink-2); border-radius: 2px;
  transition: color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 2px; height: 2px;
  background: var(--bord); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a[aria-current="page"]::after, .nav a:hover::after { transform: scaleX(1); }
.nav__num { font: 600 11px/1 var(--mono); color: var(--ink-3); margin-left: 6px; vertical-align: 2px; }

.imprint {
  display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap;
  padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--charcoal);
}
.imprint__label { font: 600 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.imprint__links { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.imprint__end { margin-left: auto; }

.menu-btn {
  display: none; align-items: center; gap: var(--s2); justify-self: end;
  height: 44px; padding: 0 var(--s3); border: 1px solid var(--charcoal); background: transparent; cursor: pointer;
  font: 700 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }

@media (max-width: 1080px) {
  .mast__row { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; }
  .nav {
    grid-column: 1 / -1; display: none; flex-direction: column; gap: 0; padding-bottom: var(--s3);
    border-top: 1px solid var(--rule);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s3) 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav a::after { left: 0; right: auto; width: 32px; bottom: 10px; }
}
@media (max-width: 760px) {
  .brand__name { font-size: 18px; }
  .mark { width: 36px; }
  .imprint__end { margin-left: 0; width: 100%; }
}
@media (max-width: 380px) {
  .brand__name { font-size: 16px; }
  .mark { width: 30px; }
}

/* ------------------------------------------------------------------ buttons and the contract window */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4);
  border: 1.5px solid var(--charcoal); background: transparent; color: var(--ink);
  font: 700 14px/1 var(--ui); letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn img { width: 16px; height: 16px; object-fit: contain; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--bord); border-color: var(--bord); }
.btn--bord { background: var(--bord); border-color: var(--bord); color: var(--paper); }
.btn--bord:hover { background: var(--ink); border-color: var(--ink); }
.btn--big { min-height: 48px; padding: 0 var(--s5); font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed; border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); background: transparent;
}
.btn[disabled] img { opacity: .45; filter: grayscale(1); }
.btn .soon { font: 600 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) { .btn { min-height: 44px; } }

.ca {
  display: inline-flex; align-items: stretch; min-height: 40px; border: 1.5px solid var(--charcoal); max-width: 100%;
}
.ca__tag {
  display: flex; align-items: center; padding: 0 var(--s3); background: var(--charcoal); color: var(--paper);
  font: 700 12px/1 var(--ui); letter-spacing: .12em;
}
.ca__value {
  display: flex; align-items: center; padding: 0 var(--s3); min-width: 0;
  font: 400 13px/1.2 var(--mono); color: var(--ink); user-select: all; overflow-wrap: anywhere;
}
.ca__value--empty { font: 400 italic 15px/1.2 var(--text); color: var(--ink-2); user-select: none; }
.ca__copy {
  display: flex; align-items: center; padding: 0 var(--s3); border: 0; border-left: 1.5px solid var(--charcoal);
  background: transparent; cursor: pointer; font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase;
}
.ca__copy:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.ca__copy[disabled] { color: var(--ink-3); cursor: not-allowed; }
@media (max-width: 760px) { .ca { width: 100%; } .ca__value { flex: 1; } }

.flash { font: 400 italic 15px/1.4 var(--text); color: var(--bord); min-height: 1em; }

/* ------------------------------------------------------------------ section scaffolding */
.page { padding-bottom: var(--s9); }
.sec { padding-top: var(--s8); }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.kicker { font: 700 12px/1.45 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--bord); margin: 0 0 var(--s3); }
.h1 { font: 900 clamp(36px, 5.2vw, 64px)/1.02 var(--serif); margin: 0; letter-spacing: -.01em; }
.h2 { font: 700 clamp(26px, 3vw, 36px)/1.1 var(--serif); margin: 0; }
.h3 { font: 700 21px/1.2 var(--serif); margin: 0; }
.lede { font: 500 19px/1.6 var(--text); color: var(--ink-2); max-width: 68ch; margin: var(--s4) 0 0; }
.small { font: 400 14px/1.5 var(--ui); color: var(--ink-3); }
.prose { font: 500 17px/1.65 var(--text); color: var(--ink-2); max-width: 70ch; }
.prose p { margin: 0 0 var(--s4); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose em { font-style: italic; }
.prose code, .mono { font: 400 .82em/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.rule2 { height: 0; border: 0; border-top: 1px solid var(--charcoal); margin: 0; }
.page-head { padding: var(--s8) 0 var(--s6); border-bottom: 1px solid var(--charcoal); }

/* ------------------------------------------------------------------ the translator (first screen) */
.hero { padding-top: var(--s7); }
.hero__intro { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); }
.hero__intro .lede { margin: 0; max-width: 56ch; font-size: 18px; }

.panes { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: stretch; }
.pane { position: relative; border: 1.5px solid var(--charcoal); background: var(--paper); padding: var(--s5); min-width: 0; display: flex; flex-direction: column; }
.pane__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.pane__lang { font: 700 12px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.pane--meme .pane__lang { color: var(--blue); }
.pane--stock .pane__lang { color: var(--bord); }
.pane__src { font: 400 13px/1.3 var(--ui); color: var(--ink-3); text-align: right; }
.pane__word {
  font: 900 clamp(48px, 7.6vw, 104px)/.95 var(--serif); margin: var(--s5) 0 var(--s3); letter-spacing: -.015em;
  overflow-wrap: anywhere; min-height: .95em;
}
.pane--meme .pane__word { color: var(--blue); }
.pane--stock .pane__word { color: var(--bord); }
.pane__word--quiet { color: var(--ink-3) !important; font-size: clamp(36px, 5vw, 64px); }
.pane__line { height: 6px; transform-origin: left; animation: draw 1.1s .35s var(--ease) both; }
.pane--meme .pane__line { background: var(--blue); width: 86%; }
.pane--stock .pane__line { background: var(--bord); width: 64%; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pane__gloss { font: 400 italic 19px/1.4 var(--text); color: var(--ink-2); margin: var(--s4) 0 0; }
.pane__facts { margin-top: auto; padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font: 400 14px/1.4 var(--ui); color: var(--ink-3); }
.pane__facts b { font-weight: 700; color: var(--ink); }

.swap { display: flex; align-items: center; justify-content: center; }
.swap .mark { width: 52px; }

.stamp {
  position: absolute; top: -13px; right: var(--s5); padding: 5px 10px; background: var(--paper);
  border: 1.5px solid var(--bord); color: var(--bord); font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.stamp--blue { border-color: var(--blue); color: var(--blue); }

@media (max-width: 860px) {
  .panes { grid-template-columns: 1fr; }
  .swap { height: 64px; }
  .swap .mark { transform: rotate(90deg); width: 44px; }
}

/* the meter: how far the next packet is */
.meter { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--charcoal); border-top: 0; }
.meter__cell { padding: var(--s4) var(--s5); border-left: 1px solid var(--rule); min-width: 0; }
.meter__cell:first-child { border-left: 0; }
.meter__k { font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.meter__v { font: 600 22px/1.2 var(--mono); margin-top: var(--s2); letter-spacing: -.02em; overflow-wrap: anywhere; }
.meter__v small { font: 400 13px/1 var(--ui); color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.meter__bar { height: 4px; background: var(--paper-3); margin-top: var(--s3); position: relative; overflow: hidden; }
.meter__bar i { position: absolute; inset: 0 auto 0 0; background: var(--bord); transition: width 1.2s var(--ease); }
@media (max-width: 860px) {
  .meter { grid-template-columns: 1fr 1fr; }
  .meter__cell:nth-child(3) { border-left: 0; }
  .meter__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ------------------------------------------------------------------ the entry: one dictionary article */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px 30px; gap: 0 var(--s7); padding-top: var(--s8); }
.article__body { min-width: 0; }
.article__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--charcoal); }
.article__no { font: 600 13px/1 var(--mono); color: var(--ink-3); width: 100%; }
.hw { font: 900 clamp(44px, 6vw, 76px)/1 var(--serif); margin: 0; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.pron { font: 400 italic 21px/1.3 var(--text); color: var(--ink-2); }
.pron b { font-style: normal; font-weight: 500; color: var(--ink); }
.arrow-to { font: 900 24px/1 var(--serif); color: var(--bord); }
.tick { font: 900 clamp(30px, 3.4vw, 44px)/1 var(--serif); color: var(--bord); position: relative; }
.tick::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--bord); transform-origin: left; animation: draw .9s .9s var(--ease) both; }

.senses { list-style: none; counter-reset: s; margin: var(--s5) 0 0; padding: 0; }
.senses li {
  counter-increment: s; position: relative; padding: var(--s3) 0 var(--s3) 48px;
  font: 500 20px/1.55 var(--text); color: var(--ink); border-bottom: 1px solid var(--rule);
}
.senses li::before {
  content: counter(s); position: absolute; left: 0; top: var(--s3);
  font: 900 26px/1.1 var(--serif); color: var(--bord);
}
.senses--quiet li { color: var(--ink-2); font-style: italic; font-weight: 400; }

.margin { border-left: 3px solid var(--bord); padding: var(--s1) 0 var(--s1) var(--s5); align-self: start; }
.margin__k { font: 700 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--bord); }
.margin__body { font: 400 italic 18px/1.55 var(--text); color: var(--ink); margin: var(--s3) 0; }
.margin__by { font: 400 13px/1.5 var(--ui); color: var(--ink-3); }
.verdict { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.verdict--yes { color: var(--ok); }
.verdict--no { color: var(--bord); }

.az { display: flex; flex-direction: column; gap: 1px; align-self: start; position: sticky; top: var(--s5); }
.az button, .az a, .az span {
  display: grid; place-items: center; width: 30px; height: 19px; padding: 0; border: 0;
  font: 700 11px/1 var(--ui); text-decoration: none; background: var(--paper-2); color: var(--ink-3); cursor: default;
  border-radius: 0 3px 3px 0;
}
.az [data-live="yes"] { background: var(--ink); color: var(--paper); cursor: pointer; }
.az [data-live="yes"]:hover { background: var(--bord); }
.az [data-here="yes"] { background: var(--bord); color: var(--paper); }
.az [data-new="yes"] { animation: tab-bloom 2.4s 1.2s var(--ease) 2; }
@keyframes tab-bloom { 50% { transform: translateX(-6px); background: var(--blue); color: var(--paper); } }
.az--strip { flex-direction: row; flex-wrap: wrap; position: static; gap: 3px; }
.az--strip button, .az--strip a, .az--strip span { border-radius: 3px; width: 32px; height: 32px; }

@media (max-width: 1080px) {
  .article { grid-template-columns: minmax(0, 1fr) 280px; }
  .article .az { display: none; }
}
@media (max-width: 860px) {
  .article { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s7); }
  .senses li { font-size: 18px; padding-left: 40px; }
}

/* ------------------------------------------------------------------ the field of new coins */
.field { margin-top: var(--s8); border-top: 1px solid var(--charcoal); border-bottom: 1px solid var(--charcoal); background: var(--paper); position: relative; }
.field__canvas { display: block; width: 100%; height: 340px; }
.field__cap { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) 0; font: 400 14px/1.4 var(--ui); color: var(--ink-3); }
.field__cap b { color: var(--ink); font-weight: 700; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; display: inline-block; }
@media (max-width: 760px) { .field__canvas { height: 260px; } }

/* the count behind the headword */
.count { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--charcoal); }
.count li { display: grid; grid-template-columns: 40px minmax(0, 220px) minmax(0, 1fr) 90px 110px; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.count__n { font: 600 13px/1 var(--mono); color: var(--ink-3); }
.count__w { font: 700 22px/1.2 var(--serif); color: var(--blue); overflow-wrap: anywhere; }
.count li:first-child .count__w { color: var(--bord); }
.count__bar { height: 12px; background: var(--paper-2); position: relative; }
.count__bar i { position: absolute; inset: 0 auto 0 0; background: var(--blue); transform-origin: left; animation: draw 1s var(--ease) both; }
.count li:first-child .count__bar i { background: var(--bord); }
.count__v { font: 600 14px/1 var(--mono); text-align: right; }
.count__c { font: 400 14px/1.3 var(--ui); color: var(--ink-3); text-align: right; }
@media (max-width: 760px) {
  .count li { grid-template-columns: 28px 1fr 64px; row-gap: var(--s2); }
  .count__bar { grid-column: 2 / -1; grid-row: 2; }
  .count__c { display: none; }
}

/* ------------------------------------------------------------------ the four steps */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--charcoal); }
.flow__step { position: relative; padding: var(--s5); border-left: 1px solid var(--rule); min-width: 0; }
.flow__step:first-child { border-left: 0; }
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; right: -9px; top: 34px; width: 16px; height: 16px; z-index: 1;
  background: var(--paper); border-top: 1.5px solid var(--charcoal); border-right: 1.5px solid var(--charcoal); transform: rotate(45deg);
}
.flow__no { font: 900 44px/1 var(--serif); color: var(--bord); }
.flow__step:nth-child(1) .flow__no, .flow__step:nth-child(2) .flow__no { color: var(--blue); }
.flow__t { font: 700 19px/1.25 var(--serif); margin: var(--s3) 0 var(--s2); }
.flow__b { font: 500 16px/1.55 var(--text); color: var(--ink-2); margin: 0; }
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow__step:nth-child(3) { border-left: 0; }
  .flow__step:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .flow__step:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step { border-left: 0; }
  .flow__step + .flow__step { border-top: 1px solid var(--rule); }
  .flow__step:not(:last-child)::after { display: block; right: auto; left: var(--s5); top: auto; bottom: -9px; transform: rotate(135deg); }
}

/* the split of a packet */
.split { display: flex; height: 72px; border: 1.5px solid var(--charcoal); margin-top: var(--s5); }
.split > div { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--s4); color: var(--paper); min-width: 0; overflow: hidden; }
.split b { font: 900 26px/1 var(--serif); }
.split span { font: 600 13px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split__paper { background: var(--bord); }
.split__burn { background: var(--blue); }
.split__work { background: var(--charcoal); }
.split-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.split-key div { font: 500 16px/1.5 var(--text); color: var(--ink-2); }
.split-key b { display: block; font: 700 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); }
.split-key div:nth-child(1) b { color: var(--bord); }
.split-key div:nth-child(2) b { color: var(--blue); }
@media (max-width: 760px) {
  .split span { display: none; }
  .split-key { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--charcoal); }
.table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--ui); }
.table th { text-align: left; font: 700 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--charcoal); white-space: nowrap; }
.table td { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table .num { text-align: right; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.table th.num { font-family: var(--ui); font-size: 11px; }
.table a { text-decoration-color: var(--rule); text-underline-offset: 3px; }
.table a:hover { text-decoration-color: currentColor; }
.t-tick { font: 900 20px/1.1 var(--serif); color: var(--bord); white-space: nowrap; }
.t-sub { color: var(--ink-3); font-size: 13px; }
.t-mint { font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.liq { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; }
.liq i { display: block; height: 6px; background: var(--blue); min-width: 2px; }
.pill { display: inline-block; padding: 3px 7px; font: 700 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.pill--ok { color: var(--ok); }
.pill--no { color: var(--bord); }
@media (max-width: 760px) {
  .table--cards thead { display: none; }
  .table--cards tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .table--cards td { padding: 0; border: 0; }
  .table--cards .hide-sm { display: none; }
  .table--cards .full-sm { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ dictionary page */
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.seg { display: inline-flex; border: 1.5px solid var(--charcoal); }
.seg button { border: 0; background: transparent; padding: 0 var(--s4); min-height: 40px; font: 700 13px/1 var(--ui); cursor: pointer; }
.seg button + button { border-left: 1.5px solid var(--charcoal); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.entries { display: grid; gap: 0; }
.card { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) 260px; gap: var(--s5); padding: var(--s6) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.card__no { font: 600 14px/1 var(--mono); color: var(--ink-3); padding-top: 8px; }
.card__hw { font: 900 40px/1 var(--serif); color: var(--blue); overflow-wrap: anywhere; }
.card__tk { font: 900 40px/1 var(--serif); color: var(--bord); }
.card__g { font: 400 italic 16px/1.4 var(--text); color: var(--ink-2); margin-top: var(--s2); }
.card__sigs { font: 400 13px/1.9 var(--ui); }
.card__sigs a { display: flex; justify-content: space-between; gap: var(--s3); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.card__sigs a:hover { color: var(--bord); }
.card__sigs span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.card--sample { position: relative; border: 1.5px dashed var(--ink-3); padding: var(--s6) var(--s5); margin-top: var(--s6); }
@media (max-width: 980px) {
  .card { grid-template-columns: 56px 1fr 1fr; }
  .card__sigs { grid-column: 2 / -1; }
}
@media (max-width: 600px) {
  .card { grid-template-columns: 1fr; gap: var(--s3); }
  .card__sigs { grid-column: auto; }
}

/* ------------------------------------------------------------------ docs */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); padding-top: var(--s7); }
.toc { position: sticky; top: var(--s5); align-self: start; display: flex; flex-direction: column; border-left: 1px solid var(--charcoal); }
.toc a { padding: 7px 0 7px var(--s4); text-decoration: none; font: 600 14px/1.3 var(--ui); color: var(--ink-3); border-left: 2px solid transparent; margin-left: -1.5px; }
.toc a:hover, .toc a.is-here { color: var(--ink); border-left-color: var(--bord); }
.doc { padding-bottom: var(--s7); margin-bottom: var(--s7); border-bottom: 1px solid var(--rule); scroll-margin-top: var(--s5); }
.doc:last-child { border-bottom: 0; }
.doc .h2 { margin-bottom: var(--s4); }
.doc .prose { margin-top: var(--s4); }
.dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--charcoal); margin-top: var(--s5); }
.dl dt, .dl dd { margin: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.dl dt { font: 700 12px/1.6 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-right: var(--s4); }
.dl dd { font: 500 16px/1.55 var(--text); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.dl dd .mono { font-size: 13px; }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: var(--s5); }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; gap: var(--s2); }
  .toc a { border: 1px solid var(--rule); padding: 6px 10px; margin: 0; }
}
@media (max-width: 600px) {
  .dl { grid-template-columns: 1fr; }
  .dl dt { border-bottom: 0; padding-bottom: 0; }
}

/* the schematic: boxes and arrows, built of type and rules */
.scheme { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: var(--s5); align-items: stretch; }
.scheme__box { border: 1.5px solid var(--charcoal); padding: var(--s3) var(--s4); background: var(--paper); position: relative; min-width: 0; }
.scheme__box + .scheme__box { margin-left: 28px; }
.scheme__box + .scheme__box::before {
  content: ""; position: absolute; left: -29px; top: 50%; width: 22px; height: 1.5px; background: var(--charcoal);
}
.scheme__box + .scheme__box::after {
  content: ""; position: absolute; left: -12px; top: calc(50% - 5px); border: 5.5px solid transparent; border-left: 7px solid var(--charcoal);
}
.scheme__k { font: 700 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.scheme__v { font: 700 16px/1.3 var(--serif); margin-top: 6px; }
.scheme__box--blue { border-color: var(--blue); }
.scheme__box--blue .scheme__k { color: var(--blue); }
.scheme__box--bord { border-color: var(--bord); }
.scheme__box--bord .scheme__k { color: var(--bord); }
.scheme-branch { margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1.5px dashed var(--blue); font: 500 15px/1.5 var(--text); color: var(--ink-2); }
.scheme-branch b { font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-right: var(--s2); }
@media (max-width: 980px) {
  .scheme { grid-template-columns: 1fr; gap: 26px; }
  .scheme__box + .scheme__box { margin-left: 0; }
  .scheme__box + .scheme__box::before { left: 50%; top: -25px; width: 1.5px; height: 20px; }
  .scheme__box + .scheme__box::after { left: calc(50% - 5px); top: -10px; border: 5.5px solid transparent; border-top: 7px solid var(--charcoal); }
}

.note {
  border-left: 3px solid var(--bord); background: var(--paper-2); padding: var(--s4) var(--s5); margin-top: var(--s5);
  font: 500 16px/1.55 var(--text); color: var(--ink-2);
}
.note b { display: block; font: 700 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--bord); margin-bottom: var(--s2); }

/* ------------------------------------------------------------------ shares */
.connect { border: 1.5px solid var(--charcoal); padding: var(--s6); margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; }
.connect__wallets { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.connect__wallets img { width: 20px; height: 20px; }
.wallet-line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); padding: var(--s4) 0; border-top: 1px solid var(--charcoal); border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) {
  .connect { grid-template-columns: 1fr; padding: var(--s5); }
  .connect__wallets { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ 404 */
.nf { padding: var(--s9) 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s8); align-items: start; }
.nf__hw { font: 900 clamp(56px, 10vw, 140px)/1.05 var(--serif); color: var(--blue); margin: 0 0 var(--s4); letter-spacing: -.02em; overflow-wrap: anywhere; }
.nf__links { display: flex; flex-direction: column; border-top: 1px solid var(--charcoal); }
.nf__links a { display: flex; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 700 18px/1.2 var(--serif); }
.nf__links a:hover { color: var(--bord); }
@media (max-width: 860px) { .nf { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s8) 0; } }

/* ------------------------------------------------------------------ footer: his banner, set in type */
.foot { margin-top: var(--s9); border-top: 3px solid var(--charcoal); }
.foot__banner { display: grid; grid-template-columns: 120px minmax(0, 1fr) 160px; align-items: center; gap: var(--s6); padding: var(--s7) 0; border-bottom: 1px solid var(--charcoal); }
.foot__bars { display: flex; flex-direction: column; gap: 12px; }
.foot__bars i { display: block; height: 12px; background: var(--charcoal); }
.foot__bars i:nth-child(1) { width: 72%; }
.foot__bars i:nth-child(2) { width: 100%; }
.foot__bars i:nth-child(3) { width: 55%; }
.foot__title { text-align: center; font: 900 clamp(34px, 5.4vw, 72px)/1 var(--serif); text-transform: uppercase; margin: 0; letter-spacing: .005em; }
.foot__underline { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--s4); }
.foot__underline i { display: block; height: 6px; transform-origin: center; }
.foot__underline i:first-child { width: 46%; background: var(--blue); }
.foot__underline i:last-child { width: 34%; background: var(--bord); }
.foot__banner .mark { width: 160px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s6) 0 var(--s7); }
.foot__k { font: 700 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
.foot__p { font: 500 15px/1.6 var(--text); color: var(--ink-2); margin: 0; }
.foot__nav { display: flex; flex-direction: column; gap: 6px; }
.foot__nav a { text-decoration: none; font: 600 15px/1.4 var(--ui); }
.foot__nav a:hover { color: var(--bord); }
.foot__links { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.foot__base { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0 var(--s6); border-top: 1px solid var(--rule); font: 400 13px/1.5 var(--ui); color: var(--ink-3); }
@media (max-width: 900px) {
  .foot__banner { grid-template-columns: 1fr; justify-items: center; gap: var(--s5); }
  .foot__bars { display: none; }
  .foot__banner .mark { width: 110px; order: -1; }
  .foot__grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.compose > * { animation: compose .7s var(--ease) both; }
.compose > *:nth-child(1) { animation-delay: .15s; }
.compose > *:nth-child(2) { animation-delay: .3s; }
.compose > *:nth-child(3) { animation-delay: .45s; }
.compose > *:nth-child(4) { animation-delay: .6s; }
.compose > *:nth-child(5) { animation-delay: .75s; }
@keyframes compose { from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.turn { animation: turn .6s var(--ease) both; transform-origin: left center; }
@keyframes turn { from { opacity: 0; transform: perspective(1400px) rotateY(-7deg) translateX(12px); } to { opacity: 1; transform: none; } }
.caret::after { content: ""; display: inline-block; width: .06em; height: .8em; background: currentColor; margin-left: .04em; vertical-align: -.05em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ phone fixes */
.article__no { line-height: 1.5; }
.az-strip { display: none; margin-top: var(--s4); }
@media (max-width: 1080px) { .az-strip { display: block; } }
@media (max-width: 860px) {
  .swap { height: 84px; }
  .stamp { right: var(--s3); }
}
@media (max-width: 760px) {
  .split b { font-size: 18px; }
  .split > div { padding: 0 var(--s2); }
}
@media (max-width: 440px) {
  .brand__name { font-size: 15px; letter-spacing: 0; }
  .brand { gap: var(--s2); }
  .menu-btn { width: 44px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
  .menu-btn span { margin: 0; }
}
@media (max-width: 340px) {
  .brand__name { font-size: 13px; }
}
@media (max-width: 760px) {
  .sec-table tr { grid-template-columns: minmax(0, 1fr) auto; }
  .sec-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .sec-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sec-table td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; }
  .sec-table td:nth-child(5) { grid-column: 2; grid-row: 2; }
  .sec-table .liq { justify-content: flex-end; }
}