/* Landing (/) only: hero with the 3D ledger ring, glass panels below. Shared pieces live in site.css. */

body {
  background:
    radial-gradient(1200px 700px at 72% 18%, rgba(162, 139, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 10% 0%, rgba(120, 160, 255, 0.06), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

.topbar { border-bottom-color: var(--ink-ghost); }
.ca-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* status line under the top bar */
.folio {
  display: flex; justify-content: space-between; gap: var(--s3); align-items: center;
  padding: 8px 0; border-bottom: var(--rule-soft);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: 0.04em;
}
.folio__live { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.folio__chain { font-variant-numeric: tabular-nums; text-align: right; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(162, 139, 255, .6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(162, 139, 255, .55); } 70% { box-shadow: 0 0 0 8px rgba(162, 139, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(162, 139, 255, 0); } }

/* ---------- hero ---------- */
.hero {
  display: grid; gap: var(--s5) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "stage" "quote";
  padding: var(--s6) 0 var(--s7);
}
.hero__copy { grid-area: copy; }
.stage { grid-area: stage; }
.quote { grid-area: quote; }
@media (min-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-areas: "copy stage" "quote stage";
    grid-template-rows: auto 1fr;
    padding-top: var(--s7);
  }
}
.tagline {
  margin-top: var(--s3);
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.035em;
  max-width: 15ch;
}
.sub { margin-top: var(--s4); max-width: 36ch; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem); line-height: 1.5; color: var(--ink-2); }

/* ---------- the stage: 3D ledger ring + the live number in its centre ---------- */
.stage {
  position: relative; container-type: inline-size;
  min-height: clamp(400px, 112vw, 520px);
  border: var(--rule-soft); border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(162, 139, 255, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(20, 26, 41, 0.55), rgba(10, 13, 20, 0.2));
  overflow: hidden; isolation: isolate;
}
@media (min-width: 980px) { .stage { min-height: 660px; } }
.stage__poster, .stage__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__poster { transition: opacity 700ms var(--ease); }
.stage__gl { opacity: 0; transition: opacity 900ms var(--ease); }
.stage__gl canvas { display: block; width: 100% !important; height: 100% !important; }
.stage.is-3d .stage__gl { opacity: 1; }
.stage.is-3d .stage__poster { opacity: 0; }
.stage__poster .t { fill: rgba(200, 214, 245, 0.16); }
.stage__poster .t.on { fill: #E9EEF7; }
.stage__poster .t.next { fill: var(--accent); }
.stage__poster .t.last { fill: rgba(162, 139, 255, 0.55); }
.stage__poster .t.last.on { fill: var(--accent); }
.stage.is-off .stage__poster .t { fill: rgba(200, 214, 245, 0.10); }

.stage__hud {
  position: absolute; left: var(--s4); right: var(--s4); top: var(--s4); z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.stage__center {
  position: absolute; z-index: 2; left: 50%; top: var(--cy, 44%);
  transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 92%;
}
.giant { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 0.86; }
.giant__word {
  font-family: var(--mono); font-size: clamp(0.72rem, 0.6rem + 0.5cqw, 0.9rem); font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.6em; padding-left: 0.32em;
}
.giant__num {
  font-family: var(--serif); font-weight: 300; font-size: clamp(4.25rem, 19cqw, 9rem);
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(162, 139, 255, 0.35), 0 2px 18px rgba(10, 13, 20, 0.9);
  transition: color var(--t-med) var(--ease);
}
.giant__num.is-tick { color: var(--accent-hi); }
.giant__num.is-pending { color: var(--ink-3); font-weight: 200; text-shadow: none; }
.height__of { margin: var(--s3) 0 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-2); text-shadow: 0 1px 10px rgba(10, 13, 20, 0.95); }

.stage__tag {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(162, 139, 255, 0.45); border-radius: 6px; padding: 5px 9px;
  font-size: var(--fs-xs); color: var(--ink); white-space: nowrap;
}
.stage__foot {
  position: absolute; z-index: 2; left: var(--s4); right: var(--s4); bottom: var(--s4);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
}
.statline .faint { white-space: normal; }
.statline {
  margin: 0; padding: 10px 12px; border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: var(--rule-soft);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink);
}
.statline .sep { color: var(--ink-3); }
.statline .accent { color: var(--accent); }
.statline b { font-weight: 600; }
.statline span { white-space: nowrap; }
.legend { margin: 0; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.lg { display: inline-block; width: 8px; height: 12px; border-radius: 1px; margin-right: -4px; }
.lg--on { background: var(--ink); }
.lg--off { border: 1px solid rgba(200, 214, 245, 0.35); }
.lg--next { background: var(--accent); }
.strip__scale { margin-left: auto; color: var(--accent); }

#src-badge { background: rgba(10, 13, 20, 0.6); }
#src-badge[data-src="chain"] { color: var(--ink); border-color: rgba(162, 139, 255, 0.6); }
#src-badge[data-src="chain"] .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#src-badge[data-src="api"] { color: var(--ink-2); }
#src-badge[data-src="offline"], #src-badge[data-src="deploying"] { color: var(--accent-hi); border-color: var(--accent); }

/* ---------- panels ---------- */
.panel {
  background: var(--glass); border: var(--rule-soft); border-radius: var(--radius-lg);
  padding: var(--s5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.quote { align-self: start; }
.quote__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.quote__head h2 { font-size: var(--fs-lg); white-space: nowrap; }
.chips { display: flex; gap: 6px; margin: var(--s2) 0 var(--s4); flex-wrap: wrap; }
.chip {
  appearance: none; border: var(--rule-soft); background: transparent; color: var(--ink-2); border-radius: 999px;
  font: 500 var(--fs-xs)/1 var(--mono); padding: 0 12px; min-height: 30px; min-width: 48px; cursor: pointer;
}
.chip:hover { border-color: var(--line); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
.quote__out { border-top: var(--rule-soft); margin-bottom: var(--s3); }
.quote__out dt span { color: var(--ink-3); }
.quote__out dd { font-weight: 600; }
.quote__out #q-fee-next { color: var(--accent); }
.quote__out .no { color: var(--accent); }
.curl { margin-top: var(--s4); }
.curl__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.curl .pre { font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-all; }

.deck { padding: var(--s3) 0; }
.deck + .deck { margin-top: var(--s4); }
.deck > section, .deck > div {
  background: rgba(20, 26, 41, 0.55); border: var(--rule-soft); border-radius: var(--radius-lg); padding: var(--s5);
}
.deck .section-head { border-top: 0; padding-top: 0; }
.deck .section-head h2 { font-size: var(--fs-lg); }
@media (min-width: 900px) { .cols--3 > * + *::before, .cols--2 > * + *::before { display: none; } }

.sched tr.here td { background: var(--accent-tint); }
.sched tr.here td:first-child { color: var(--accent-hi); font-weight: 600; }
.sched tr.here td:first-child::after {
  content: "you are here"; margin-left: 8px; font-size: 10px; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
.sched tr.past td { color: var(--ink-3); }
.sched tr.past td.r { text-decoration: line-through; text-decoration-color: var(--ink-ghost); }
.sched__note { margin-top: var(--s4); }

.feed td:first-child { font-weight: 600; white-space: nowrap; }
.feed tr.uncounted td { color: var(--ink-3); }
.feed tr.uncounted td:first-child { font-weight: 400; }
.feed tr.is-new td { animation: ink-in 1.4s var(--ease); }
@keyframes ink-in { from { background: var(--accent-tint); } to { background: transparent; } }
.feed .feed__empty td { color: var(--ink-3); font-family: var(--serif); font-size: 0.9375rem; padding: var(--s4) 0; }
.feed__legend { margin-top: var(--s3); display: flex; gap: 6px; align-items: center; }
.swatch { display: inline-block; width: 10px; height: 10px; border: var(--rule-soft); border-radius: 2px; }

.steps { margin: var(--s4) 0; padding: 0; list-style: none; counter-reset: s; font-family: var(--mono); font-size: var(--fs-sm); }
.steps li { counter-increment: s; display: flex; gap: var(--s3); padding: 7px 0; border-bottom: var(--rule-soft); color: var(--ink-3); }
.steps li::before { content: counter(s, decimal-leading-zero); width: 1.8em; color: var(--ink-3); }
.steps li.now { color: var(--ink); }
.steps li.now::before { color: var(--accent); }
.steps li.done { color: var(--ink-2); }
.steps li.done::before { content: "✓"; color: var(--accent); }
#mine-status, #harvest-status { min-height: 1.5em; margin-top: var(--s2); word-break: break-word; }

.sats__big { margin: 0 0 var(--s3); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.sats__big .num { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 2rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sats__unit { color: var(--ink-2); }
#sats .btn { margin-top: var(--s4); }
.harvests { margin-top: var(--s4); }
#token .btn, #mine .btn { margin-top: var(--s2); }
#token .rows, #contract .rows, #sats .rows { margin-bottom: var(--s4); }
.rows dd a { text-decoration: none; border-bottom: 1px solid var(--ink-ghost); }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 9px 0 9px 26px; border-bottom: var(--rule-soft); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
.ticks--promise li::before { background: transparent; border: 1px solid var(--ink-2); }
.promise .small { margin-top: var(--s4); }
.colophon { border-top-color: var(--ink-ghost); }

/* ---------- phones ---------- */
@media (max-width: 599px) {
  .folio__mid { display: none; }
  .hero { padding-top: var(--s5); }
  .topbar { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .topbar .nav { justify-self: end; }
  .topbar__right { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: start; }
  .ca-block { grid-column: 1; }
  .countdown { grid-column: 1 / -1; grid-row: 2; }
  .topbar__right .btn { min-height: 34px; }
  .sched tr.here td:first-child::after { display: block; margin: 2px 0 0; }
  .stage__hud { left: var(--s3); right: var(--s3); top: var(--s3); }
  .stage__foot { left: var(--s3); right: var(--s3); bottom: var(--s3); }
  .statline { font-size: var(--fs-xs); padding: 8px 10px; }
  .panel, .deck > section, .deck > div { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .feed tr.is-new td { animation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}