/* Home page: the Trustless founder card, on the same row as the $EOTM token card. */
.hero-cards { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s8); align-items: stretch; }
.hero-cards .ltok { margin-top: 0; max-width: none; }
.tlc { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s4); min-width: 0; }
.tlc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.tlc-top h2 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.tlc-top h2 .sym { color: var(--text-3); font-weight: 500; font-size: var(--fs-base); margin-left: 4px; }
.tlc-art { display: block; border-radius: var(--r-md); overflow: hidden; background: #0b0b0d; aspect-ratio: 1; max-height: 300px; justify-self: center; width: 100%; max-width: 300px; }
.tlc-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tlc-no { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.tlc-meta { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.tlc .btn { width: 100%; }
@media (max-width: 900px) {
  .hero-cards { grid-template-columns: minmax(0, 1fr); }
  .tlc { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: var(--s4); }
  .tlc-top, .tlc .btn { grid-column: 1 / -1; }
  .tlc-art { max-width: 120px; }
}

/* Home hero, desktop: tighter than the shared hero so both cards (and their buttons) sit above the fold
   on a 1440×900 screen. Other pages keep the shared .hero spacing. */
@media (min-width: 901px) {
  .hero-home { padding-top: 40px; }
  .hero-home h1 { font-size: clamp(40px, 6vw, 68px); margin: var(--s4) 0; }
  .hero-home .hero-cards { margin-top: var(--s6); }
  .hero-home .lead { max-width: 76ch; }
  .hero-home .ltok-chart { height: 76px; }
  .hero-home .tlc-art { max-width: 210px; max-height: 210px; }
}

/* Founder-series marquee: shown by mint.js only while the mint is open. Quiet by design: a hairline panel,
   a small label and the pieces drifting slowly with faded edges. Phones: first thing under the header;
   wide screens: beside the headline. */
.tl-mq { display: block; margin: 0 0 var(--s6); padding: var(--s3) 0 var(--s4); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--bg-elev); color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease); }
.tl-mq[hidden] { display: none; }
.tl-mq:hover, .tl-mq:focus-visible { border-color: var(--accent); }
.tl-mq-head { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); font: 600 12px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.tl-mq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.tl-mq-go { margin-left: auto; color: var(--accent-text); letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.tl-mq-view { display: block; min-height: 64px; overflow: hidden; margin-top: var(--s3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tl-mq-track { display: flex; width: max-content; animation: tl-mq 80s linear infinite; }
/* the art occupies 624/1000 of each card, starting at (188, 150): scale the card so that square fills the tile */
.tl-mq-tile { position: relative; display: block; flex: none; width: 64px; height: 64px; margin-right: 10px; overflow: hidden; border-radius: var(--r-sm); background: #0b0b0d; }
.tl-mq-tile img { position: absolute; width: 160.26%; height: 160.26%; max-width: none; left: -30.13%; top: -24.04%; }
.tl-mq:hover .tl-mq-track, .tl-mq:focus-visible .tl-mq-track { animation-play-state: paused; }
@keyframes tl-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tl-mq-track { animation: none; } }
@media (max-width: 1199px) {
  .hero-home:has(.tl-mq:not([hidden])) { padding-top: var(--s4); } /* sits right under the header */
}
@media (min-width: 1200px) {
  .tl-mq { position: absolute; top: 40px; right: calc(var(--s6) + var(--safe-r)); width: min(40%, 520px); margin: 0; }
  .tl-mq-tile { width: 88px; height: 88px; margin-right: 12px; }
  .tl-mq-view { min-height: 88px; }
}