/* meme.css — the shared skin for the token pages on theccsi.org.
 *
 * WHY THIS FILE EXISTS (2026-10-07). The first token page (/meme_1.html) was
 * burned into an immutable Solana mint — the mint's own description links it,
 * and `updateAuthority: null` means that link can never move. Token pages are
 * therefore a FAMILY: meme_1.html, meme_2.html, ... Each one states its own
 * canonical facts and its own holder-edited link, but they share one skin so a
 * new token is a content change, not a redesign. Copying the style into each
 * page would be a copy of a fact, and a copy drifts (the lesson this whole site
 * is built on) — so the skin lives in ONE file, here.
 *
 * The palette is the site's (see index.html / work.html / grind.html). Nothing
 * here is novel; it is deliberately the same room, so a token page reads as part
 * of theccsi.org and not as a bolted-on microsite.
 */
:root {
  --bg: #0b0e14; --fg: #d8dee9; --muted: #7a8294;
  --accent: #7aa2f7; --accent2: #9ece6a; --line: #1f2430; --card: #11151f;
  --warn: #e0b86a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
header { margin-bottom: 2.5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin: 0.6rem 0 0.5rem; color: #fff; }
h1 .crystal { color: var(--accent); }
h2 { font-size: 1.15rem; color: #fff; margin: 2.6rem 0 0.9rem; font-weight: 600; }
p { margin-bottom: 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.home { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.75rem; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
a.home:hover { color: var(--accent2); border-bottom-color: var(--accent2); text-decoration: none; }
a.home::before { content: '\2190 '; opacity: .55; }

/* The ticker ($LATE) under the title. */
.ticker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent2); font-size: 1rem; letter-spacing: 0.08em; margin-bottom: 1.4rem; }

.lede { font-size: 1.12rem; color: var(--fg); max-width: 62ch; }
.lede + .lede { color: var(--muted); }

/* The token mark. Sits above the title; small, no text baked into the image. */
.mark { width: 132px; height: 132px; display: block; margin: 0 0 1.4rem 0;
  border-radius: 12px; border: 1px solid var(--line); image-rendering: auto; }

.card { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
.card p:last-child { margin-bottom: 0; }
/* The small muted note that appears under a section's main content. */
.note { color: var(--muted); font-size: 0.85rem; }

/* THE CREATOR'S STATEMENT BLOCK — fixed, creator-only facts. A solid accent rail
 * says "this is the creator's statement"; the holder-edited block below is
 * deliberately muted, so the two are never mistakable for each other. That
 * distinction is a requirement of the format, not a decoration. (The block is not
 * LABELLED "canonical" — 2026-10-07 revision pass, Ben: the whole page is the
 * record, so the word was redundant self-labeling. The distinction is carried by
 * the rail and the plain-words notes, not a stamp.) */
.statement { border-left: 3px solid var(--accent2); }
.statement .note { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; }
.statement ol { padding-left: 1.35rem; }
.statement li { margin-bottom: 0.85rem; }
.statement li:last-child { margin-bottom: 0; }
.statement strong { color: #fff; }

/* The holder-edited block — clearly NOT canonical. */
.holders { border-left: 3px solid var(--line); }
.holders .note { color: var(--muted); font-size: 0.85rem; }
/* A raw URL (the Wikipad link) is one unbroken token wider than a phone. Wrap it
 * so a long address can never overflow the viewport — the render gate caught this
 * at 390px (2026-10-07). `overflow-wrap:anywhere` breaks the token; `word-break`
 * alone would break mid-word on ALL text, which we do not want. */
.holders a { overflow-wrap: anywhere; word-break: break-word; }

/* Wallets / change-log tables. */
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:first-child { color: var(--muted); width: 7.5em; font-family: ui-monospace, monospace;
  font-size: 0.82rem; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
.addr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all; color: var(--fg); }
.wide { overflow-x: auto; }

.tag { display: inline-block; font-family: ui-monospace, monospace; font-size: 0.72rem;
  color: var(--accent); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.15rem 0.5rem; margin-right: 0.4rem; }
.todo { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
.pending { color: var(--warn); }

footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.85rem; }
footer .mono { font-size: 0.78rem; }