/* apeonfone -----------------------------------------------------------
   A text file that happens to be a website. The restraint is the point:
   the page is making a claim about authenticity, and authenticity does
   not shout. Everything decorative was cut except the caret and the one
   accent, which is the only colour on the page. Dark by request. The greys
   come from the reference site's own dark tokens; the accent deliberately
   does not, see the note on --accent below.
   -------------------------------------------------------------------- */

:root{
  color-scheme: dark;

  --paper:#110F0C;
  --card:#1B1915;
  --raise:#262420;          /* hover surface, one step up from card */
  --ink:#E9E8E3;
  --muted:#A29E96;
  --faint:#837D74;        /* 4.8:1 on the paper, still clearly below --muted */
  --line:#2E2B26;
  --line-soft:#242118;
  /* Not the reference site's amber, deliberately. Wearing their accent made
     this page look like the copy. Lime also separates hardest from the memes,
     which are all warm neutrals: beige walls, concrete, tan fur. */
  --accent:#C6F24E;
  --accent-hi:#D6F97A;      /* hover */
  --on-accent:#110F0C;      /* text sitting on the accent, never --ink */

  --sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",
         Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",
         "Courier New",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* A floor, so losing a specific rule can never again let an image push the
   page wider than the viewport. */
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:672px;margin:0 auto;padding:48px 24px 96px}
@media (min-width:640px){ .wrap{padding:72px 32px 120px} }

/* ---------- the menu ----------
   Sticky and thin. The page is long and the contract sits at the very top,
   so this is mostly a way back to it. */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(8px)){
  .topbar{backdrop-filter:blur(10px) saturate(140%)}
}
/* Matches .wrap, not the wider vault: at the top of the page the menu sits
   directly above the headline, and any other width reads as misalignment. */
/* Name on the left edge, nav ending on the right edge, both landing on the
   same margins as the hero and the contract band below. */
.topbar-in{
  max-width:672px;margin:0 auto;padding:11px 24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:6px 24px;
  font-family:var(--mono);font-size:13px;
}
.topbar-name{color:var(--ink);text-decoration:none}
.topbar-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 42px}
.topbar-nav a{
  color:var(--muted);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.topbar-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* The sticky bar would otherwise sit on top of whatever you jumped to. */
[id]{scroll-margin-top:64px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

@media (min-width:640px){ .topbar-in{padding:12px 32px} }

@media (max-width:560px){
  /* No room for a single row: stack, and centre both. */
  .topbar-in{
    flex-direction:column;align-items:center;
    padding:10px 20px;font-size:12px;gap:6px;
  }
  .topbar-nav{gap:4px 26px}
}

/* ---------- headline ---------- */
h1{
  margin:40px 0 0;
  font-size:clamp(44px,10vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:600;
  text-wrap:balance;
}
/* The whole page turns on one word, so that word gets the only mark in the
   type. An underline rather than a full highlight: at 76px a solid block
   reads as a redaction. Done with text-decoration so it sits on the baseline
   the font actually has, instead of a pseudo-element guessing at it, which
   cut straight through the glyphs. */
h1 em{
  font-style:normal;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:.075em;
  text-underline-offset:.11em;
  text-decoration-skip-ink:none;
}
.caret{
  display:inline-block;
  width:.5em;height:.8em;
  margin-left:.08em;
  transform:translateY(.05em);
  background:var(--accent);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.standfirst{
  margin:24px 0 0;max-width:60ch;
  font-size:18px;color:var(--muted);text-wrap:pretty;
}
.standfirst b{color:var(--ink);font-weight:600}

/* ---------- the contract band ----------
   Pulled out of the fact table: it is the one string a visitor came to copy,
   and it was previously the quietest thing on the page. */
.ca-band{
  margin:36px 0 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px 16px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
}
.ca-k{
  grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ca-v{
  grid-column:1;grid-row:2;
  font-family:var(--mono);font-size:16px;line-height:1.4;
  color:var(--ink);overflow-wrap:anywhere;
}
.ca-v.unset{color:var(--faint)}
.ca-btn{
  /* Spans both rows and centres against the pair, rather than sitting in the
     second row and lining up with the address. The label sits above the
     value, so aligning to the value alone put the button low in the card. */
  grid-column:2;grid-row:1/span 2;align-self:center;
  font-family:var(--mono);font-size:12.5px;
  padding:9px 15px;border-radius:7px;
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.ca-btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
@media (max-width:520px){
  /* One column: label, address, then the button under both. The row spans
     above would leave it stranded in a column that no longer exists. */
  .ca-band{grid-template-columns:1fr}
  .ca-k{grid-column:1;grid-row:auto}
  .ca-v{grid-column:1;grid-row:auto}
  .ca-btn{grid-column:1;grid-row:auto;justify-self:start}
}

/* ---------- provenance ----------
   A work label, not a crypto widget. Two facts, no chrome, and the artist's
   name is a link because the account is the evidence. */
.prov{margin:0}
.prov-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:16px;padding:16px 2px;
  border-bottom:1px solid var(--line);
}
.prov-row:last-child{border-bottom:0}
@media (max-width:520px){
  .prov-row{grid-template-columns:1fr;gap:4px}
}
.prov dt{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);
}
.prov dd{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.prov dd.unset{color:var(--faint)}
.prov-link{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  transition:color .15s ease;
}
.prov-link:hover{color:var(--accent)}
.prov-link.unset{color:var(--faint);text-decoration:none;pointer-events:none}

/* Name plus handles on one line. The name is a fact, the handles are the
   places to check it, so the name is plain and every handle looks alike. */
.prov-artist{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.prov-name{color:var(--ink)}
.prov-artist .prov-link{white-space:nowrap}

/* A second destination on a row, quieter than the value it sits beside. */
.prov-alt{
  margin-left:18px;
  font-family:var(--mono);font-size:12.5px;
  color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--line);text-decoration-thickness:1px;
  text-underline-offset:4px;white-space:nowrap;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.prov-alt:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ---------- prose ---------- */
.prose{margin:56px 0 0;max-width:60ch}
/* Straight after a heading the 56px above is a second gap on top of the
   heading's own, so the rule and the first line drift 80px apart. Every
   other section sits ~22px under its rule; this makes lore match. */
h2 + .prose{margin-top:0}
.prose p{margin:0 0 28px;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose b{font-weight:600}
.mark{background:var(--accent);padding:0 4px;color:var(--on-accent)}

/* One rule under every section heading. Before this, provenance and how-to-buy
   got one for free from their list borders while lore and the vault got none,
   so the page had two kinds of section. */
h2{
  margin:76px 0 24px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:15px;font-family:var(--mono);font-weight:500;
  letter-spacing:.02em;color:var(--muted);
}

/* ---------- accounts ----------
   Two lists side by side so the difference between his accounts and the
   token's is structural, not something the reader has to infer. Reuses the
   provenance rows: same kind of content, so the same treatment. */
/* flex, not grid: with one group live it fills the row instead of leaving an
   empty second column, which is what a hidden group used to look like */
.accounts{display:flex;flex-wrap:wrap;gap:28px 40px}
.acct-group{flex:1 1 240px;min-width:0}
.acct-group h3{
  margin:0 0 2px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.acct-group .prov-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:13px 2px}
.acct-group .prov dd{font-family:var(--mono);font-size:13.5px}
.acct-note{
  margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);
  text-wrap:pretty;
}
.acct-note b{color:var(--ink);font-weight:600}

/* ---------- image ----------
   Without this the main figure renders at its intrinsic 1170px and blows the
   page width out. .vault img overrides it for the grid tiles. */
figure{margin:56px 0 0}
figure img{
  display:block;width:100%;height:auto;
  border-radius:10px;border:1px solid var(--line);
}
figcaption{
  margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--faint);
}

/* ---------- meme vault ----------
   A plain responsive grid, no carousel. See the note in index.html. */
/* The gallery is the one thing on the page that is not prose, so the whole
   section breaks out past the 672px measure to give the tiles more room.
   The heading breaks out with it: leaving it behind at the text measure
   read as a misalignment rather than a decision. */
.vault-section{
  width:min(860px, calc(100vw - 48px));
  margin:76px 0 0 50%;
  transform:translateX(-50%);
}
.vault-section h2{margin-top:0}
.vault-lede{margin:-6px 0 22px;text-wrap:pretty}

.vault{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
/* On a phone the vault is a carousel, one picture at a time.
   Reflowing to two columns split work-eat-work across two rows and the
   sequence stopped meaning anything; three squeezed into 375px made every
   tile a thumbnail. One at a time keeps the pictures big and keeps the order,
   which is what the grid was carrying: read left to right it is still the
   day, just in a line instead of three rows.

   Only the vault scrolls, never the page. */
@media (max-width:600px){
  .vault{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* Bleeds to the screen edges, then pads by half the leftover so the
       first and last tiles can sit centred like every one in between. */
    margin:0 -24px;
    padding:0 10vw 4px;
    scrollbar-width:none;
  }
  .vault::-webkit-scrollbar{display:none}
  .vault figure{
    flex:0 0 80vw;
    scroll-snap-align:center;
    /* A sliver of the neighbours stays visible on each side. That is the
       only thing telling you there are eight more. */
  }
}

.vault figure{margin:0}
.vault a{
  display:block;position:relative;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--card);
  transition:border-color .15s ease;
}
.vault a:hover{border-color:var(--accent)}
.vault img{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;
  background:var(--card);
}
.vault-empty{
  grid-column:1/-1;margin:0;
  border:1px dashed var(--line);border-radius:10px;
  padding:34px 18px;text-align:center;
  font-family:var(--mono);font-size:12.5px;color:var(--faint);
}

/* ---------- how to buy ----------
   Three steps, tight. The number is the only ornament. */
.steps{list-style:none;margin:0;padding:0;max-width:60ch}
.steps li{
  display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:14px;padding:14px 0;
  border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6;
}
.steps li:first-child{border-top:0}
.step-n{
  font-family:var(--mono);font-size:12px;color:var(--accent);
  padding-top:3px;
}
.steps b{font-weight:600;color:var(--ink)}
.steps div{color:var(--muted);text-wrap:pretty}
/* One chip row, used under the contract and inside step one. The button in
   step one shares the box so the row lines up; it otherwise inherited
   .step-copy's margin-top, which exists for the standalone button in step 2. */
.step-net{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:12px;
}
.step-net code,
.step-net .step-copy{
  font-family:var(--mono);font-size:11.5px;line-height:1.45;
  padding:6px 10px;border-radius:6px;
  border:1px solid var(--line);
  margin:0;
}
.step-net code{
  color:var(--muted);background:var(--card);overflow-wrap:anywhere;
}
.step-net .step-copy{color:var(--ink);background:var(--paper)}
.step-copy{
  display:inline-block;margin-top:10px;
  font-family:var(--mono);font-size:11.5px;
  padding:6px 11px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.step-copy:hover{border-color:var(--accent);background:var(--raise)}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{
  font-family:var(--mono);font-size:13px;
  padding:11px 16px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease;
}
.btn:hover{border-color:var(--accent);background:var(--raise)}
.btn.pri{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:500}
.btn.pri:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- footer ----------
   Same rule and mono voice as every other divider on the page. */
footer{
  margin-top:72px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:6px 24px;align-items:baseline;
  font-family:var(--mono);font-size:12.5px;
}
.foot-name{color:var(--ink)}
.foot-note{color:var(--muted)}

/* ---------- accessibility floor ---------- */
a:focus-visible,button:focus-visible,.rc-a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  *{transition:none!important}
}

/* ---- receipts ----
   Two posts, side by side, each linking to the real thing. They used to be
   two lines of text; a line saying "187K views" is a claim, and a picture of
   the post with the number on it is closer to the thing itself. Nobody has to
   leave the page to see it, and the link is still there for anyone who wants
   to check that the screenshot is honest.

   Both images are cropped square and anchored to the top, where the account
   name and the caption are, so the two sit level whatever shape they arrived
   in: one was a square tweet and the other a phone screenshot twice as tall. */
.receipts{
  list-style:none;padding:0;
  margin:-4px 0 30px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  max-width:520px;
}
.receipt{
  display:block;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--card);
  transition:border-color .15s ease;
}
.receipt img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.receipt-meta{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 12px;font-size:13px;
}
.receipt b{color:var(--ink);font-weight:600}
.receipt-what{flex:1}
.receipt-stat{color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.receipt:hover{border-color:var(--accent)}
.receipt:hover b{color:var(--accent)}
/* ---- where the money goes ----
   One sentence, set large enough to be the claim it is. It replaced a
   definition list, and a table was the wrong shape for it: a table implies
   several facts of equal weight, and there is only one fact here. */
.deal{
  margin:0;max-width:44ch;
  font-size:20px;line-height:1.45;text-wrap:pretty;
  color:var(--ink);
}
.deal b{
  font-weight:600;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.deal-check{
  display:flex;flex-wrap:wrap;gap:20px;
  margin:18px 0 0;
}
/* .prov-alt carried an 18px left margin for sitting inline after the fee
   text. In a flex row the gap does that job, and the margin just pushes the
   first link off the left edge. */
.deal-check .prov-alt{margin-left:0}
@media (min-width:640px){ .deal{font-size:22px} }


/* ---- what it is paired against ----
   One line under the contract. Set at reading size rather than as a badge:
   it is a fact about the token, and a pill with a border would read as
   marketing next to an address people came to copy. */
.pairline{
  margin:22px 0 0;max-width:52ch;
  font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty;
}
.pairline b{color:var(--ink);font-weight:600}