/* Shared layout for TokenJackorta's directory and per-token pages (generated by tjk/sitegen.py).
   Each token page adds /<slug>/theme.css, which sets only the variables below. Four layouts (v-split, v-banner,
   v-centered, v-editorial) give each identity its own structure, not just a colour swap. */
:root {
  --bg: #010b21;
  --surface: #06132e;
  --line: rgba(150, 172, 235, 0.18);
  --text: #eef1fb;
  --muted: #a7b0d2;
  --primary: #2fe3c5;
  --accent: #f3bd57;
  --warn: #f3bd57;
  --radius: 18px;
  --head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { filter: brightness(1.15); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: 1.3rem; margin: 0 0 0.75rem; }
p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }
code, .mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: 0.5rem 0.8rem; z-index: 5; }

/* Top bar (creator brand, always visible) */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 68rem; margin: 0 auto; padding: 1rem 1.25rem;
  font-size: 0.95rem; color: var(--muted);
}
.topbar a { color: var(--text); text-decoration: none; font-weight: 650; }
.topbar .by { display: inline-flex; align-items: center; gap: 0.55rem; }
.topbar .by img { width: 28px; height: 28px; border-radius: 8px; }

.page { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 3.5rem; }
.narrow { max-width: 44rem; margin-left: auto; margin-right: auto; }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.pill::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); }
.pill.concept { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.pill.concept::before { background: var(--warn); }
.pill.on-curve::before { background: var(--primary); }
.pill.graduated::before { background: #9b8cff; }
.pill.archived::before { background: var(--muted); }

.ticker { font-family: var(--head); font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin: 0.2rem 0 0.9rem; }
.lead { font-size: 1.18rem; color: var(--text); max-width: 38rem; }
.byline { color: var(--muted); font-size: 0.95rem; }

/* Sections */
.section { margin: 0 0 1.1rem; padding: 1.4rem 1.4rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.section.plain { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.section .note { color: var(--muted); font-size: 0.95rem; }
.source { border-left: 3px solid var(--primary); padding-left: 0.9rem; margin: 0.9rem 0; }
.source .meta { display: block; color: var(--muted); font-size: 0.9rem; }
.banner-warn {
  margin: 0 0 1.1rem; padding: 0.9rem 1.1rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, var(--bg));
}
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 12rem 1fr; gap: 0.25rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 1rem 0 0; }
.status-line .meta { color: var(--muted); font-size: 0.9rem; }
.status-line .stale { color: var(--warn); font-weight: 600; }

/* Contract block: in the hero, directly under the name and symbol, on the first screen (owner, 2026-10-17) */
.ca {
  margin: 0.2rem 0 1.1rem; padding: 0.95rem 1.05rem 0.9rem; max-width: 37rem; text-align: left;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--line)); border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.ca-label { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ca-value { margin: 0; }
.ca-addr { display: block; font-size: 1.02rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; word-break: break-all; -webkit-user-select: all; user-select: all; }
.ca-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.ca .status-line { margin-top: 0.75rem; }
.ca-note { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.9rem; }
.ca-none .ca-value { font-size: 1.02rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 0.95rem;
  border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text);
  font: 650 0.97rem/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); filter: none; }
.btn-primary { background: var(--primary); color: var(--bg); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.08); }
/* X and Telegram beside the contract (owner, 2026-10-19): icons drawn inline, brand colours, white text at >= 4.5:1 */
.btn-social { gap: 0.45rem; }
.btn-social svg { flex: none; }
.btn-x { background: #0f1419; color: #fff; border-color: rgba(255, 255, 255, 0.24); }
.btn-telegram { background: #1d6fa5; color: #fff; border-color: transparent; }
.btn-x:hover, .btn-telegram:hover { filter: brightness(1.15); border-color: rgba(255, 255, 255, 0.45); }
.ca-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.ca-soc { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }  /* X and Telegram stay together on a wide row */
.v-centered .ca-social { justify-content: center; }
.ticker .tick-icon { display: inline-block; width: 1.75rem; height: 1.75rem; margin: 0 0.5rem 0 0; vertical-align: middle; border-radius: 8px; }
.actionbar { display: none; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.links a { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 600; }
.links a:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.6rem; }
.no-list { list-style: none; padding: 0; margin: 0; }
.no-list li { position: relative; padding: 0.25rem 0 0.25rem 1.6rem; }
.no-list li::before { content: "\2715"; position: absolute; left: 0; color: #f2788a; font-weight: 800; }

/* Layouts: the art never sits above the name and contract on a phone, and is height-limited on a desktop, so the
   contract block stays on the first screen in all four. */
/* Layout 1: split hero (text left, art right) */
.v-split .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; padding: 1.6rem 0 2.2rem; }
.v-split .hero h1 { font-size: clamp(2.5rem, 5.5vw, 3.9rem); margin: 0.4rem 0 0; }
.v-split .hero .art img { width: 100%; max-height: min(30rem, 62vh); aspect-ratio: 1 / 1; object-fit: cover; object-position: 100% 50%; border-radius: 26px; box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--primary) 45%, transparent); }

/* Layout 2: banner (full-width art, title card overlapping it) */
.v-banner .band { margin: 0 -1.25rem; }
.v-banner .band img { width: 100%; aspect-ratio: 16 / 6; max-height: 34vh; object-fit: cover; object-position: 70% 50%; }
.v-banner .hero { position: relative; margin: -3.5rem auto 2rem; max-width: 46rem; padding: 1.4rem 1.5rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.v-banner .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; }

/* Layout 3: centered (icon first, centered type) */
.v-centered .hero { text-align: center; padding: 1.8rem 0 2rem; }
.v-centered .hero .icon { width: 7.5rem; margin: 0 auto 1rem; border-radius: 30px; box-shadow: 0 0 0 1px var(--line), 0 24px 70px -24px color-mix(in srgb, var(--accent) 50%, transparent); }
.v-centered .hero h1 { font-size: clamp(2.4rem, 6.5vw, 3.8rem); margin: 0; }
.v-centered .hero .lead, .v-centered .hero .ca { margin-left: auto; margin-right: auto; }
.v-centered .ca-actions, .v-centered .ca .status-line { justify-content: center; }

/* Layout 4: editorial (serif display, narrow column, wide figure) */
.v-editorial .hero { padding: 1.8rem 0 1.2rem; }
.v-editorial .hero h1 { font-size: clamp(2.6rem, 7.5vw, 4.6rem); font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.v-editorial .figure { margin: 0 0 1.6rem; }
.v-editorial .figure img { border-radius: 6px; }
.v-editorial .story p:first-child::first-letter { float: left; font: 600 3.4rem/0.9 var(--head); margin: 0.3rem 0.55rem 0 0; color: var(--accent); }
.v-editorial .section { border-radius: 6px; }

/* Directory (home) */
.home-hero { padding: 2.6rem 0 2rem; }
.home-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin: 0 0 0.6rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.tcard { display: grid; grid-template-columns: 72px 1fr; gap: 0.35rem 1rem; align-items: center; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.tcard:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.tcard img { width: 72px; height: 72px; border-radius: 18px; grid-row: span 2; }
.tcard strong { font-size: 1.15rem; }
.tcard .sym { color: var(--accent); font-weight: 700; letter-spacing: 0.05em; font-size: 0.92rem; margin-left: 0.4rem; }
.tcard .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.tcard .pill { font-size: 0.82rem; padding: 0.2rem 0.65rem; white-space: nowrap; }
.tcard .meta { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.reading article { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.reading article:first-child { border-top: 0; padding-top: 0; }
.reading h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.reading .meta, .notes .meta { color: var(--muted); font-size: 0.9rem; }
.label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }

.foot { margin: 2.5rem 0 0; color: var(--muted); font-size: 0.92rem; text-align: center; }
.foot p { margin: 0 0 0.35rem; }

/* Motion: one gentle entrance, never for people who ask for less motion */
@media (prefers-reduced-motion: no-preference) {
  .hero, .home-hero { animation: rise 0.6s ease-out both; }
  @keyframes rise { from { transform: translateY(8px); } to { transform: none; } }  /* no fade: the contract is never transparent */
}

/* Coin pages, lively (owner, 2026-10-19: meme-native, not static). Decorative only: a breathing glow behind the page,
   the icon and art floating, a pulse on the status dot, a glow round the contract block and a shine across Copy
   contract, X and Telegram. Only transforms of decorative elements, the glow layer's opacity, shadows and background
   positions move: no content fades in, and the address, Copy contract and the trading links never move or change size
   (the rendered phone check measures them at load). Clipped, so nothing widens the page. */
@media (prefers-reduced-motion: no-preference) {
  body.coin-page::before, body.coin-page::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  }
  body.coin-page::before {
    background:
      radial-gradient(36rem 24rem at 10% 6%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
      radial-gradient(30rem 22rem at 94% 34%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%);
  }
  body.coin-page::after {
    background:
      radial-gradient(32rem 22rem at 82% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      radial-gradient(28rem 20rem at 4% 46%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%);
    animation: tjk-breathe 7s ease-in-out infinite alternate;
  }
  .coin-page .ticker .tick-icon { animation: tjk-wobble 3.2s ease-in-out infinite alternate; }
  .coin-page.v-centered .hero .icon { animation: tjk-float 4.4s ease-in-out infinite alternate; }
  .coin-page.v-split .hero .art img { animation: tjk-float 6s ease-in-out infinite alternate; }
  .coin-page.v-banner .band, .coin-page.v-editorial .figure { overflow: hidden; }
  .coin-page.v-editorial .figure { border-radius: 6px; }
  .coin-page.v-banner .band img, .coin-page.v-editorial .figure img { animation: tjk-zoom 18s ease-in-out infinite alternate; }
  .coin-page .ca { animation: tjk-glow 4.5s ease-in-out infinite; }
  .coin-page .pill::before { animation: tjk-dot 1.8s ease-in-out infinite; }
  .coin-page .btn-primary, .coin-page .btn-social {
    background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%);
    background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0;
    animation: tjk-shine 4.2s ease-in-out infinite;
  }
  .coin-page .btn-x { animation-delay: 0.7s; }
  .coin-page .btn-telegram { animation-delay: 1.4s; }
  @keyframes tjk-breathe { from { opacity: 0.35; } to { opacity: 1; } }
  @keyframes tjk-wobble { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
  @keyframes tjk-float { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-7px) rotate(1.5deg); } }
  @keyframes tjk-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
  @keyframes tjk-glow {
    0%, 100% { box-shadow: 0 0 0 0 transparent, 0 10px 30px -18px color-mix(in srgb, var(--primary) 55%, transparent); }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent), 0 14px 38px -14px color-mix(in srgb, var(--primary) 70%, transparent); }
  }
  @keyframes tjk-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
  @keyframes tjk-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  body.coin-page::before, body.coin-page::after,
  body.coin-page *, body.coin-page *::before, body.coin-page *::after { animation: none !important; }
}

@media (max-width: 52rem) {
  .v-split .hero { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 0.6rem; }
  .v-split .hero .art img { aspect-ratio: 16 / 9; max-height: 40vh; }
  .v-banner .band img { aspect-ratio: 16 / 7; }
  .v-banner .hero { margin-top: -2rem; padding: 1.1rem; }
}
/* Phones: one tap target per row where labels would crowd; a fixed bar with the same controls once the hero's
   contract block has scrolled out of view (copy.js), with room kept at the bottom so it never covers text. */
@media (max-width: 45rem) {
  .ca-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ca-actions .btn-primary { grid-column: 1 / -1; }
  /* With X and Telegram (pages built from 2026-10-19): row 1 is Copy contract with the two icons beside it, row 2 the
     trading links, exactly where they were. Row 1 adds up to 100% less 2px, so a trading link never joins it. */
  .ca-actions.with-social { display: flex; flex-wrap: wrap; }
  .ca-actions.with-social .ca-soc { display: contents; }
  .ca-actions.with-social .btn-primary { order: 0; flex: 1 1 calc(100% - 88px - 1rem - 2px); }
  .ca-actions.with-social .btn-social { order: 1; flex: 0 0 44px; width: 44px; padding: 0; }
  .ca-actions.with-social .btn-social .soc-label { display: none; }
  .ca-actions.with-social .btn-trade { order: 2; flex: 1 1 calc(50% - 0.3rem); }
  .ca-social .btn-x { width: 44px; padding: 0; }  /* the X mark alone; Telegram keeps its name */
  .ca-social .btn-x .soc-label { display: none; }
  .has-actionbar { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  .actionbar:not([hidden]) {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.45rem; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 10; padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .actionbar .btn { min-height: 42px; padding: 0.4rem 0.5rem; font-size: 0.92rem; }
}
@media (max-width: 34rem) {
  .topbar .tag { display: none; }
  .v-centered .hero .icon { width: 5.5rem; border-radius: 22px; margin-bottom: 0.8rem; }
  .ticker { margin: 0.15rem 0 0.7rem; }
}
@media (max-width: 30rem) {
  .section { padding: 1.1rem 1rem 1rem; }
  .facts div { grid-template-columns: 1fr; }
  .topbar { padding: 0.8rem 1rem; }
  .page { padding: 0 1rem 3rem; }
  .v-banner .band { margin: 0 -1rem; }
  .ca { padding: 0.85rem 0.85rem 0.8rem; }
  .ca-addr { font-size: 0.98rem; }
}