/* Outis — /coin/. Loaded after site.css and home.css, which carry the field,
   the hero, the bands, the cards, the tenets and the closer. This file only
   adds what the coin page has and the landing doesn't. */

.gl .coin .hero { cursor: pointer; }
.coin .hero h1 .big { max-width: 9ch; }

/* The flip control sits in the hero's foot line. */
.flip {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--fg); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.flip::before { content: ""; width: 7px; height: 7px; background: var(--fg); }
.flip:hover { text-decoration: underline; text-underline-offset: 4px; }
.flip-out { color: var(--fg-2); }
html:not(.gl) .flip, html:not(.gl) .flip-out { visibility: hidden; }

/* Slogans instead of prices: the landing's ticker, not linked. */
.slogans span {
  display: inline-flex; align-items: center; gap: 28px; padding: 14px 0 14px 28px;
  font-size: 20px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
}
.slogans span b { color: var(--red); font-size: 12px; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .slogans .ticker-track { animation-duration: 55s; }
}

/* § 01: the application form, refused four times. */
.card.opens { max-width: 880px; }
.card.opens td:nth-child(2) { color: var(--fg-2); text-decoration: none; }
.card.opens td:nth-child(3) { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.card.opens td:nth-child(3)::before { content: none; }
.card.opens td.no { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--red); }
.card.opens td.yes { color: var(--bg); }
.card.opens tr:last-child td { background: rgba(237, 237, 237, .06); }
.card.opens tr:last-child td.yes { background: var(--fg); }
.card.opens .stampmark { border-color: var(--fg); color: var(--fg); }

/* § 02: the thesis. */
.net-band .bet {
  margin-top: 28px; padding-left: 16px; border-left: 2px solid var(--fg);
  font-size: clamp(20px, 2vw, 26px); font-weight: 800; font-stretch: 112%; line-height: 1.2; color: var(--fg);
}

.stats-band { padding-top: 8vh; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(5, 5, 5, .7); }
.stats > div { padding: 28px 22px 26px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(56px, 7vw, 112px); font-weight: 900; font-stretch: 125%; letter-spacing: -.04em; line-height: .85; font-variant-numeric: tabular-nums; }
.stats > div > span { display: block; margin-top: 16px; max-width: 22ch; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); line-height: 1.6; }

/* § 03: why a memecoin. The coin sits to the right; the copy to the left. */
.meme-band .lead-p { margin: 30px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--fg-2); }
.meme-band .shred-copy { max-width: 500px; }

/* § 04: what it isn't. */
.card.isnt { max-width: 880px; }
.card.isnt td:nth-child(2) { color: var(--fg); text-decoration: none; font-family: var(--mono); font-size: 12.5px; }
.card.isnt td:nth-child(2)::before { content: "∅ "; color: var(--fg-3); }
.card.isnt .stampmark { font-size: 14px; }

/* § 05: the contract. */
.ca { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); border: 1px solid var(--line-2); background: rgba(8, 8, 8, .85); }
.ca-box { display: grid; gap: 14px; padding: 26px 26px 24px; border-right: 1px solid var(--line-2); min-width: 0; }
.ca-box > .lbl { color: var(--fg-3); }
.ca-box code {
  display: block; overflow-wrap: anywhere; user-select: all;
  font-family: var(--mono); font-size: clamp(16px, 2.1vw, 26px); letter-spacing: .02em; line-height: 1.35; color: var(--fg);
}
.ca-box.pending code { font-family: var(--sans); font-size: clamp(48px, 7vw, 96px); font-weight: 900; font-stretch: 125%; line-height: .8; letter-spacing: .05em; user-select: none; }
.ca-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ca-links .lbl { color: var(--fg-2); line-height: 1.6; max-width: 52ch; }
.coin-facts { margin: 0; display: grid; align-content: start; }
.coin-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.coin-facts > div:last-child { border-bottom: 0; }
.coin-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.coin-facts dd { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; text-align: right; }

.clones { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--red); border-left-width: 4px; background: rgba(255, 59, 36, .05); }
.clones b { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--red); padding-top: 3px; white-space: nowrap; }
.clones p { margin: 0; max-width: 76ch; font-size: 14.5px; line-height: 1.65; color: var(--fg-2); }

/* § 06: fine print, set like the back of a form. */
.fine { max-width: 76ch; columns: 2 320px; column-gap: 40px; }
.fine p { margin: 0 0 16px; break-inside: avoid; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--fg-2); }
.fine p:first-child::first-line { color: var(--fg); }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ca { grid-template-columns: minmax(0, 1fr); }
  .ca-box { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 799px) {
  .coin .hero h1 { padding-top: 32px; }
  .gl .meme-band { padding-top: 58vh; }
  .gl .net-band { padding-top: 56vh; }
}
@media (max-width: 560px) {
  .flip-out { display: none; }
  .slogans span { font-size: 16px; padding: 12px 0 12px 20px; gap: 20px; }
  .card.opens thead th:nth-child(2), .card.opens td:nth-child(2) { display: table-cell; }
  .card.opens td:nth-child(2) { font-size: 12.5px; }
  .clones { grid-template-columns: 1fr; }
  .stats > div { padding: 22px 16px; }
}