/* The link-in-bio page. Same brand as the launch site: ink, paper, orange, Archivo. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/archivo.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --ink: #0B0B0C;
  --ink-2: #18181A;
  --line: #2C2C2E;
  --paper: #F5F2EB;
  --orange: #FF5A1F;
  --grey: #A3A098;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: 'Archivo', 'Arial', sans-serif; font-size: 1rem; line-height: 1.4; -webkit-font-smoothing: antialiased; }
h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { width: 100%; max-width: 520px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }

.head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.logo { width: 88px; height: 88px; border-radius: 50%; }
.wordmark { width: 220px; }
.tag { color: var(--grey); }

.listen { margin-top: 28px; display: grid; gap: 10px; }
.big { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 18px; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); font-weight: 800; font-size: 1.0625rem; }
.big:first-child { border: 2px solid var(--orange); }
.big img { width: 24px; height: 24px; }
.big:active, .links a:active { transform: translateY(1px); }

.who { margin-top: 32px; }
.who h2 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.links { margin-top: 10px; display: grid; gap: 8px; }
.links a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.links a:hover { border-color: var(--orange); }
.links img { width: 22px; height: 22px; flex: none; }
.links span { font-weight: 800; }
.links b { margin-left: auto; font-weight: 400; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }