/* The page around the rows.

   Only whoami.wesports.io loads this file. The rows themselves, and the
   design tokens everything here reads, live in embed.css, which travels to
   whatever embeds the tool. The split is the rule: anything that has to look
   the same in Arena belongs in embed.css, and anything that is this page
   belongs here.

   Arena's design language, by way of tabula.css: plain CSS on tokens, sharp
   radii, hairline rules, no glow, light only. The body carries class
   "whoami", which is what puts the tokens in scope for the chrome as well as
   for the rows. */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-size-adjust: 0.525;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 24px; }

.disp {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  font-weight: 400;
  font-size-adjust: none;
}
.muted { color: var(--fg-3); }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* ---- top bar ---- */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { display: block; }
.brand .disp { font-size: 23px; color: var(--ws-ink); line-height: 1; }
.by { margin-left: auto; font-size: 12.5px; color: var(--fg-3); }

/* ---- hero ----
   The page shows the address itself, in its own ink band, so mount() is
   asked for the rows without a lead of its own (lead: false in main.ts).
   One fetch fills both: the mount hands the payload back as it arrives. */
.hero { background: var(--ws-ink); color: #fff; }
.hero-inner { padding: 44px 24px 40px; }
.hero .w-kicker { color: rgba(255,255,255,0.58); }
.ip {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(30px, 7vw, 56px);
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  word-break: break-all;
}
.hero-sub {
  color: rgba(255,255,255,0.78);
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* The two buttons that sit on ink. The base .w-btn comes from embed.css. */
.w-btn-sand { background: var(--ws-sand); color: var(--ws-ink-900); padding: 12px 20px; font-size: 14px; }
.w-btn-sand:hover { background: #fff; }
.w-btn-sand:disabled { opacity: 0.55; cursor: default; }
.w-btn-onink { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); padding: 12px 20px; font-size: 14px; }
.w-btn-onink:hover { background: rgba(255,255,255,0.10); border-color: #fff; }
.hero .w-btn:focus-visible { outline-color: var(--ws-sand); }

/* ---- the prose sections ---- */
main.wrap { padding-bottom: 8px; }
.sec-label { display: flex; align-items: center; gap: 10px; margin: 40px 0 14px; }
.sec-label .w-kicker { white-space: nowrap; font-size: 12.5px; }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 14px; color: var(--fg-2); }
.prose strong { color: var(--fg-1); }
.prose code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-sunken); padding: 1px 5px; border-radius: var(--r1); }
.prose pre {
  margin: 0 0 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r2);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
}
.prose pre code { background: none; padding: 0; font-size: 13px; }

/* ---- footer ---- */
.foot { margin-top: 56px; padding: 22px 0 40px; border-top: 1px solid var(--rule-soft); background: var(--bg-warm); }
.foot p { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.foot-mark { font-size: 21px; color: var(--ws-ink); }

@media (max-width: 620px) {
  .hero-inner { padding: 32px 24px 30px; }
  .sec-label { margin-top: 32px; }
  .by { margin-left: 0; flex: 1 0 100%; }
}