/* claudecodebr.stauf.com.br — a página da bio (decisão 30/09: redes só Instagram e YouTube; YouTube escondido até o
   canal existir; sem link para stauf.com.br/Axis por enquanto). Celular primeiro: é aberta pelo link da bio. */

/* 30/09 ~21:40, operator: «enquadrar tudo na msm pagina o bio.. ter q scrollar pra ver a parte de baixo n faz mt sentido».
   Tudo cabe numa tela: o corpo é uma coluna de 100svh (bio + rodapé) e cada medida vertical escala com a ALTURA da tela
   (svh), não só com a largura. Conferido no validar.js em 360×640, 375×667, 390×844, 412×915, 1440×900 e 1920×1080. */
body { display: flex; flex-direction: column; min-height: 100svh; }
.bio { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(44px, 6svh, 72px) var(--gutter) clamp(8px, 2svh, 24px); overflow: hidden; }
.bio .eixo { left: 50%; }
.bio-topo { position: absolute; top: 18px; right: var(--gutter); z-index: 3; display: flex; gap: 14px; }
.bio-topo a { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); text-decoration: none; padding: 8px 2px; }
.bio-topo a[aria-current="true"] { color: var(--ink); border-bottom: 1px solid var(--laranja); }
.bio-topo a:hover { color: var(--ink); }

.bio-cab { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; width: min(520px, 100%); }
.bio-mascote { position: relative; width: clamp(96px, min(40vw, 20svh), 200px); margin-bottom: clamp(12px, 2.6svh, 26px); }
.bio-mascote svg { position: relative; z-index: 1; filter: drop-shadow(0 0 28px rgba(200, 112, 74, .35)); }
.bio h1 { margin: 0; font: 600 clamp(32px, min(10.5vw, 6.6svh), 64px)/.95 var(--display); letter-spacing: -.04em; }
.bio h1 .br { color: var(--verde); }
.bio .arroba { margin-top: clamp(6px, 1.2svh, 10px); }
.bio .linha { margin: clamp(8px, 1.8svh, 18px) 0 0; max-width: 36ch; color: var(--muted); font-size: clamp(14.5px, min(4.2vw, 2.3svh), 18px); line-height: 1.45;
  background: radial-gradient(closest-side, var(--preto-1) 55%, transparent); }

.bio-links { position: relative; z-index: 1; list-style: none; margin: clamp(14px, 3.4svh, 34px) 0 0; padding: 0; width: min(520px, 100%); display: grid; gap: clamp(8px, 1.4svh, 12px); }
.bio-links a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: clamp(10px, 1.8svh, 16px) 16px; text-decoration: none; transition: border-color .22s var(--ez), transform .22s var(--ez), box-shadow .22s var(--ez); }
.bio-links a:hover, .bio-links a:focus-visible { border-color: color-mix(in srgb, var(--laranja) 70%, transparent); transform: translateY(-2px);
  box-shadow: 0 10px 40px -18px rgba(200, 112, 74, .55); }
.bio-links .ic { width: clamp(36px, 5.2svh, 44px); height: clamp(36px, 5.2svh, 44px); display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--grafite-1); color: var(--laranja-texto); }
.bio-links .ic svg { width: 22px; height: 22px; }
.bio-links b { display: block; font: 600 17px/1.25 var(--sans); }
.bio-links small { display: block; margin-top: 2px; color: var(--dim); font-size: 13px; line-height: 1.3; }
.bio-links .seta { font: 500 16px/1 var(--mono); color: var(--dim); transition: transform .22s var(--ez), color .22s var(--ez); }
.bio-links a:hover .seta { transform: translateX(3px); color: var(--laranja-texto); }
.bio-links .destaque { border-color: color-mix(in srgb, var(--laranja) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--laranja-fundo) 35%, var(--vidro-1)) 0%, var(--vidro-2) 70%, var(--vidro-3) 100%); }
.bio-links .destaque .ic { background: var(--laranja); color: var(--preto-0); border-color: var(--laranja); }
.bio-links .selo { margin-left: 8px; vertical-align: 2px; }
.bio-links [hidden] { display: none; }

/* rodapé da bio: mais curto que o comum, para caber na mesma tela */
.bio + .rodape { padding: 6px var(--gutter) clamp(10px, 2svh, 20px); }
@media (max-height: 700px) { .bio .linha { display: none; } }   /* em tela baixa (iPhone SE: 667) sai a frase, ficam os links */