/* The flex card. Shared by the page and the shareable PNG — edit once, both move.
   Built to stop a scroll: saturated hue-wash per flex kind, foil banding, and the
   candle blown up to fill the card as its spine. */

@font-face {
  font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: block;
  src: url('/fonts/archivo-black-400.woff2') format('woff2');
}
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: block; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: block; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 400; font-display: block; src: url('/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 500; font-display: block; src: url('/fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 600; font-display: block; src: url('/fonts/plex-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 700; font-display: block; src: url('/fonts/plex-mono-700.woff2') format('woff2'); }

/* This file has to stand alone: the PNG page loads card.css and nothing else, so
   any reset it assumes from site.css would silently not apply there. Without this
   the standalone card's padding fell outside its 630px box and pushed the footer
   46px past the bottom edge — on every card, invisibly, until it was measured. */
.fcard, .fcard *, .fcard *::before, .fcard *::after,
.card-frame, .card-frame * { box-sizing: border-box; }
.fcard p, .fcard dl, .fcard dd, .fcard dt { margin: 0; }

:root {
  --void: #06060c;
  --void-2: #0c0b18;
  --paper: #ffffff;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;

  /* Signature hue: the site's own, used for chrome outside the cards. */
  --brand-1: #ff2e88;
  --brand-2: #7a5cff;
  --brand-3: #00e0ff;
}

/* Each flex kind gets four widely-spaced hues plus a base ramp. Four matters:
   an analogous three-stop (pink → orange → yellow) renders as one flat sunset,
   while hues far apart on the wheel read as the iridescent thing this is meant to
   be. Colour also carries meaning — a cashed-out win never looks like a bag you
   are still holding. */
.fcard[data-kind="realized"] {
  --h1: #ff1f8f; --h2: #ff4d3d; --h3: #ffb020; --h4: #b23dff;
  --base-a: #ff2e88; --base-b: #6a1fd8;
}
.fcard[data-kind="unrealized"] {
  --h1: #00d9ff; --h2: #6e5bff; --h3: #ff3dd0; --h4: #3dffc8;
  --base-a: #00b8ff; --base-b: #5a2fe0;
}
.fcard[data-kind="recent"] {
  --h1: #9cff2e; --h2: #00e5b0; --h3: #2e9bff; --h4: #b45cff;
  --base-a: #00d98f; --base-b: #2452e0;
}
.fcard {
  --h1: #ff2e88; --h2: #7a5cff; --h3: #00e0ff; --h4: #ffb020;
  --base-a: #ff2e88; --base-b: #4b1fd8;
}

.fcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  background: var(--void);
  color: var(--paper);
  font-family: var(--sans);
  container-type: inline-size;
}

/* The wash. A full-bleed three-stop ramp underneath means there is never a dead
   hole in the middle — blooms alone on black left one, and a muddy centre is the
   opposite of eye-catching. The blooms then ride on top for depth. */
.fcard-wash {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(54% 64% at 10% 14%, var(--h1) 0%, transparent 62%),
    radial-gradient(50% 58% at 84% 6%, var(--h4) 0%, transparent 60%),
    radial-gradient(58% 66% at 96% 72%, var(--h3) 0%, transparent 62%),
    radial-gradient(60% 64% at 26% 96%, var(--h2) 0%, transparent 64%),
    radial-gradient(46% 50% at 56% 46%, color-mix(in oklab, var(--h3) 55%, transparent) 0%, transparent 70%),
    linear-gradient(138deg, var(--base-a) 0%, var(--base-b) 100%);
  filter: saturate(1.22);
}
/* Foil: fine diagonal banding plus a grain plate, at low opacity — this should
   read as a surface, not as stripes. `soft-light` keeps saturation where
   `overlay` was greying the mid-tones out. */
.fcard-holo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    repeating-linear-gradient(122deg,
      rgba(255,255,255,.13) 0 2px, rgba(255,255,255,0) 2px 9px,
      rgba(255,255,255,.06) 9px 11px, rgba(255,255,255,0) 11px 22px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .7;
}
/* Just enough floor under the type to hold white legible on a light hue, kept
   shallow so it darkens the corner rather than the card. */
.fcard::after {
  content: ''; position: absolute; inset: 42% 0 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(6,4,16,.10) 40%, rgba(6,4,16,.30) 100%);
}

/* ── content ────────────────────────────────────────────────────────────── */
.fcard-inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(20px, 6.5cqi, 34px);
  gap: clamp(12px, 3cqi, 18px);
}

.fcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fcard-label {
  font-size: clamp(9px, 2.6cqi, 12px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.fcard-chip {
  flex: none;
  font-size: clamp(9px, 2.4cqi, 11px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* The whole claim block centres — Chef, 2026-07-29. */
.fcard-hero { margin-block: auto; text-align: center; }
.fcard-kicker {
  margin: 0; font-size: clamp(13px, 4cqi, 19px); font-weight: 500; letter-spacing: -.01em;
  color: rgba(255,255,255,.86);
}
/* The number people repeat. Sized off the container so it stays enormous at any
   card width, with a soft bloom rather than a hard shadow. */
.fcard-shout {
  margin: .02em 0 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(58px, 30cqi, 168px); line-height: .82; letter-spacing: -.045em;
  text-shadow: 0 0 34px rgba(255,255,255,.34), 0 6px 44px rgba(0,0,0,.34);
  overflow-wrap: anywhere;
}
.fcard-shout.is-usd { font-size: clamp(40px, 19cqi, 108px); letter-spacing: -.04em; }
.fcard-shout[data-len="5"] { font-size: clamp(48px, 24cqi, 130px); }
.fcard-shout[data-len="6"] { font-size: clamp(42px, 21cqi, 112px); }
.fcard-shout[data-len="7"], .fcard-shout[data-len="8"], .fcard-shout[data-len="9"] { font-size: clamp(36px, 17cqi, 94px); }
.fcard-shout .x { font-size: .48em; margin-left: .04em; letter-spacing: 0; opacity: .92; }
/* Centred under the number and a size up — Chef, 2026-07-29. */
.fcard-sub {
  margin: .2em 0 0; font-size: clamp(15px, 4.8cqi, 24px); font-weight: 500;
  color: rgba(255,255,255,.92); text-align: center;
}
.fcard-addr {
  font-family: var(--mono); font-size: .84em; letter-spacing: -.02em;
  color: rgba(255,255,255,.72);
}

/* ── token logo ─────────────────────────────────────────────────────────── */
.fcard-logo { display: flex; align-items: center; justify-content: center; }
.fcard-logo img {
  display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.42));
}
.fcard-blank .fcard-logo { display: none; }
/* Portrait cards put the logo directly above the multiple (Chef, 2026-07-29). The
   inner box is a flex column there, so explicit orders move it without touching the
   share image, which lays the same elements out on a grid. */
.card-slot .fcard-head,  .permalink-card .fcard-head  { order: 1; }
.card-slot .fcard-logo,  .permalink-card .fcard-logo  { order: 2; margin-block: auto 0; }
.card-slot .fcard-hero,  .permalink-card .fcard-hero  { order: 3; margin-block: 10px auto; }
.card-slot .fcard-money, .permalink-card .fcard-money { order: 4; }
.card-slot .fcard-rows,  .permalink-card .fcard-rows  { order: 5; }
.card-slot .fcard-foot,  .permalink-card .fcard-foot  { order: 6; }
.card-slot .fcard-logo img, .permalink-card .fcard-logo img { width: auto; height: clamp(44px, 15cqi, 64px); }

/* One line, one baseline. This is INLINE layout, not flex, on purpose: a flex row
   aligns items by their box, so the padded pill never truly sat on the same line as
   the dollars whatever offset was applied. As inline-block the pill's own text
   baseline is the box's baseline, and the three parts line up because the browser
   is doing ordinary text layout. */
.fcard-money { display: block; text-align: center; }
.fcard-on {
  display: inline; margin: 0 .38em;
  font-size: clamp(13px, 3.6cqi, 19px); font-weight: 500; color: rgba(255,255,255,.86);
}
.fcard-usd {
  display: inline;
  font-family: var(--display); font-size: clamp(20px, 7.4cqi, 40px); letter-spacing: -.025em;
}
.fcard-ticker {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(11px, 3.2cqi, 16px); letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #0a0a12;
  overflow-wrap: anywhere;
  display: inline-block; vertical-align: baseline; line-height: 1.15;
}

/* Stats as glass pills — a row on the share image, a row on the page. */
.fcard-rows { margin: 0; display: flex; gap: clamp(6px, 1.8cqi, 10px); }
.fcard-rows .row {
  flex: 1; min-width: 0; text-align: center;
  padding: clamp(8px, 2.4cqi, 13px) clamp(9px, 2.6cqi, 15px);
  border-radius: 14px;
  background: rgba(6,4,16,.36);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(9px);
}
.fcard-rows dt {
  font-size: clamp(8px, 2.2cqi, 10px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.fcard-rows dd {
  margin: 4px 0 0; font-family: var(--mono); font-weight: 600;
  font-size: clamp(12px, 3.4cqi, 17px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.fcard-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: clamp(2px, 1cqi, 6px);
}
.fcard-brand {
  font-family: var(--display); font-size: clamp(12px, 3.4cqi, 17px); letter-spacing: -.02em;
}
.fcard-brand i { font-style: normal; color: var(--h3); }
.fcard-who {
  font-family: var(--mono); font-size: clamp(10px, 2.6cqi, 13px); letter-spacing: -.01em;
  color: rgba(255,255,255,.62);
}

/* ── standalone: the 1200×630 share image ───────────────────────────────── */
/* Full bleed, one card. Sizes are absolute here — container queries would key off
   the same 1200px every time, so there is nothing to gain and clarity to lose. */
.card-frame { width: 1200px; height: 630px; background: var(--void); }
.card-frame .fcard { width: 100%; height: 100%; border-radius: 0; }
/* Two columns. A single column left a dead third of the card on the right, and the
   candle parked in it looked like a stray graphic whenever the multiple was modest
   — a 2.7× is honestly a short wick, which is exactly when it reads as broken. The
   stats stack there instead, so every part of the frame carries something. */
.card-frame .fcard-inner {
  display: grid; padding: 42px 54px 40px; gap: 16px 46px;
  grid-template-columns: 1.08fr .92fr;
  grid-template-rows: auto 1fr auto auto auto;
}
.card-frame .fcard-head  { grid-area: 1 / 1 / 2 / 3; }
.card-frame .fcard-hero  { grid-area: 2 / 1 / 5 / 2; align-self: center; margin: 0; }
.card-frame .fcard-logo  { grid-area: 2 / 2 / 3 / 3; align-self: center; }
.card-frame .fcard-money { grid-area: 3 / 2 / 4 / 3; }
.card-frame .fcard-rows  { grid-area: 4 / 2 / 5 / 3; flex-direction: column; gap: 9px; max-width: none; }
.card-frame .fcard-foot  { grid-area: 5 / 1 / 6 / 3; }
.card-frame .fcard-logo img { width: auto; height: 132px; max-height: 100%; }
.card-frame .fcard-rows .row { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.card-frame .fcard-rows dd { margin: 0; }
.card-frame .fcard-label { font-size: 15px; }
.card-frame .fcard-chip { font-size: 13px; padding: 7px 16px; }
.card-frame .fcard-kicker, .card-frame .fcard-sub { font-size: 25px; }
/* Graduated by digit count so a long multiple never wraps out of its column. */
.card-frame .fcard-shout { font-size: 182px; }
.card-frame .fcard-shout[data-len="4"] { font-size: 156px; }
.card-frame .fcard-shout[data-len="5"] { font-size: 128px; }
.card-frame .fcard-shout[data-len="6"] { font-size: 108px; }
.card-frame .fcard-shout[data-len="7"],
.card-frame .fcard-shout[data-len="8"],
.card-frame .fcard-shout[data-len="9"] { font-size: 92px; }
.card-frame .fcard-shout.is-usd { font-size: 116px; }
.card-frame .fcard-shout.is-usd[data-len="7"] { font-size: 96px; }
.card-frame .fcard-shout.is-usd[data-len="8"],
.card-frame .fcard-shout.is-usd[data-len="9"] { font-size: 84px; }
.card-frame .fcard-usd { font-size: 46px; }
.card-frame .fcard-ticker { font-size: 18px; padding: 8px 16px; }
.card-frame .fcard-rows { gap: 12px; max-width: 760px; }
.card-frame .fcard-rows .row { padding: 14px 18px; border-radius: 16px; }
.card-frame .fcard-rows dt { font-size: 11px; }
.card-frame .fcard-rows dd { font-size: 21px; }
.card-frame .fcard-brand { font-size: 20px; }
.card-frame .fcard-who { font-size: 15px; }
/* Explicit height, no `bottom`. Setting top+bottom+height over-constrains the box:
   height wins, `bottom` is dropped, and the candle ran 76px past the card edge. */