/* _espiral/pagina.css — as páginas interiores da Q: a CAPA do disco (liner notes) (2026-09-21).
   Páginas normais, legíveis, no tom do disco; um disco pequeno no topo gira com o scroll e leva de
   volta à home; um disco grande espreita da capa, à direita (só em ecrãs largos). */
:root{
  --paper:#0E0F14; --ink:#E2EAE3; --accent:#04BACE; --dot:#E8813C;
  --soft:color-mix(in oklab,var(--ink) 66%,var(--paper));
  --rule:color-mix(in oklab,var(--ink) 16%,var(--paper));
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column}
.sl-main{flex:1 0 auto}
a{color:inherit}

.sl-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(18px,4vw,48px);background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.sl-home{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-size:1.15rem}
.sl-home em{font-style:italic}
/* ⚠️ O CABEÇALHO USA O LOGÓTIPO, NÃO UM MINI-DISCO (2026-09-24). Tinha cá um disquinho que
   girava com o scroll; o Vitor deu pela falta do "d." com o ponto laranja, e as páginas de raiz
   (start/thanks/404) já usavam a marca — o site é que estava a dizer duas coisas diferentes.
   A marca é a mesma marcação dessas páginas; o disco GRANDE da direita (.sl-peek) continua a girar. */
.sl-rec{width:40px;height:40px;display:block;flex:none}
.wm-mark{width:34px;height:34px;flex:none;overflow:visible;color:var(--ink)}
.wm-dot{fill:var(--dot)}
.sl-home:hover .wm-mark,.sl-home:focus-visible .wm-mark{color:var(--accent)}
.sl-home:hover span,.sl-home:focus-visible span{color:var(--accent)}
.sl-nav{display:flex;gap:clamp(12px,2.4vw,26px);font:12px/1 var(--mono);letter-spacing:.06em}
.sl-nav a{text-decoration:none;color:var(--soft);padding:6px 0;border-bottom:1px solid transparent}
.sl-nav a:hover{color:var(--ink)}
.sl-nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

.sl-main{position:relative;z-index:2;max-width:760px;padding:clamp(56px,10vh,110px) clamp(18px,4vw,48px) 64px;
  margin-left:clamp(0px,calc((100vw - 1320px) / 2),400px)}
.sl-k{margin:0 0 14px;font:11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sl-main h1{margin:0 0 .3em;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.02em}
.sl-lede{margin:0 0 clamp(40px,7vh,64px);font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.45;color:var(--soft);max-width:34em}
.sl-sec{padding:clamp(26px,4vh,38px) 0;border-top:1px solid var(--rule)}
.sl-sec h2{display:flex;align-items:baseline;gap:12px;margin:0 0 .7em;font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.15}
.sl-sec h2 .n{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--accent)}
/* ⚠️ `/1` colava as duas linhas quando a lista parte no telemóvel (2026-09-24) */
.sl-sec .lb{margin:-.4em 0 1em;font:11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sl-sec p{margin:0 0 .9em;font-size:1.06rem;line-height:1.74;max-width:36em}
.sl-sec p:last-child{margin-bottom:0}
.sl-quote{font-family:var(--serif) !important;font-size:clamp(1.3rem,2.2vw,1.6rem) !important;line-height:1.35 !important}
.sl-end{padding-top:clamp(30px,5vh,44px);border-top:1px solid var(--rule)}
.sl-end p{margin:0 0 20px;font-family:var(--serif);font-size:1.25rem}
.sl-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sl-btns a{font:500 .98rem/1 var(--sans);text-decoration:none;border:1px solid color-mix(in oklab,var(--ink) 30%,var(--paper));border-radius:999px;padding:12px 20px}
.sl-btns a:first-child{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.sl-btns a:hover{border-color:var(--accent)}
.sl-foot{position:relative;z-index:2;padding:26px clamp(18px,4vw,48px) 40px;font:11px/1.8 var(--mono);letter-spacing:.06em;color:var(--soft);border-top:1px solid var(--rule)}

/* o disco a espreitar da capa */
.sl-peek{position:fixed;z-index:1;top:50%;right:calc(-1 * min(44vh,420px));width:min(88vh,840px);height:min(88vh,840px);
  transform:translateY(-50%);pointer-events:none;opacity:.95}
.sl-peek svg{width:100%;height:100%;display:block}
@media (max-width:1100px){ .sl-peek{display:none} }
@media (max-width:560px){ .sl-home span{display:none} .sl-nav{gap:14px} }

/* ---- copy completa do site (2026-09-24): listas da prática, retrato, sociais ---- */
.sl-narrow .sl-main, .sl-narrow{max-width:min(680px,92vw)}
.pr-list{list-style:none;margin:0;padding:0;font-size:1rem;line-height:1.7}
.pr-list li{padding:2px 0}
.pr-area{display:inline;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pr-area:hover,.pr-area:focus-visible,.pr-area.cur{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 50%,transparent)}
.pr-met li{color:var(--soft);transition:color .25s}
.pr-met li.on{color:var(--accent)}
.sl-portrait{margin:0 0 18px}
.sl-portrait img{width:116px;height:116px;border-radius:50%;object-fit:cover}
.sl-social a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-foot{line-height:2}
.pr-det{margin:26px 0 0;border-top:1px solid var(--rule);padding-top:14px}
.pr-det summary{cursor:pointer;font:11px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.pr-det summary:hover,.pr-det summary:focus-visible{color:var(--accent)}
.pr-det .sl-sec:first-of-type{border-top:0;padding-top:10px}
.sl-meta{font:11px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* o currículo compacto do About: rótulo da área, e por baixo o que ela é (2026-09-24) */
.sl-dl{margin:0}
.sl-dl dt{margin:0 0 .35em;font:11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sl-dl dd{margin:0 0 1.5em;font-size:1.06rem;line-height:1.74;max-width:36em}
.sl-dl dd:last-child{margin-bottom:0}

/* ⚠️ No Practice estas listas SÃO o conteúdo da página, não legendas de uma secção com prosa por
   baixo. A 11px em cinzento liam-se como rodapé. Sobem para o tom do texto — e não se inventa um
   terceiro nível de cinzento para texto pequeno, que é a regra da casa. (2026-09-24) */
.sl-sec .lb.corpo{font-size:12.5px;line-height:2;color:var(--ink);letter-spacing:.1em;max-width:34em}

/* ---- Practice: a CONTRACAPA do disco (2026-09-24) -----------------------------------------
   Estava com títulos em serifa e listas minúsculas em maiúsculas separadas por traços — genérico,
   e o Vitor disse-o: "tá muito anos 2000". Passa a alinhar-se ao objecto do site: as áreas são
   FAIXAS do lado A, as ferramentas e os métodos são o que vem impresso no lado B. O número da
   faixa à esquerda, o título por baixo, e os termos um por linha à direita — como uma ficha
   técnica, não como uma lista de serviços. ⚠️ Cada termo na sua linha: era a corrida de pontos
   médios que fazia a página parecer despejada. */
.tr-into{margin:0 0 clamp(34px,6vh,54px);font-size:1.06rem;line-height:1.74;max-width:36em;color:var(--soft)}
.tr-side{margin:clamp(30px,5vh,46px) 0 0;font:11px/1.6 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.tr{list-style:none;margin:0;padding:0}
.tr > li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(6px,1.4vh,10px) clamp(20px,4vw,56px);
  padding:clamp(20px,3.2vh,30px) 0;border-top:1px solid var(--rule)}
.tr-h{display:flex;align-items:baseline;gap:12px}
.tr-n{margin:0;font:12px/1 var(--mono);letter-spacing:.14em;color:var(--soft)}
.tr h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15}
.tr-l{list-style:none;margin:0;padding:0}
.tr-l li{font-size:1rem;line-height:1.95;color:var(--ink)}
/* o disco grande espreita à direita: em ecrãs médios a coluna dos termos não lhe vai por cima */
@media(max-width:860px){
  .tr > li{grid-template-columns:1fr}
  .tr-l{margin-top:2px}
}

/* a ficha técnica quer mais largura do que uma coluna de leitura: são duas colunas lado a lado,
   e o disco só entra no ecrã a partir dos 1100px (ver .sl-peek) */
.sl-ficha{max-width:min(940px,94vw)}
.sl-ficha .sl-lede,.sl-ficha .tr-into{max-width:34em}
.sl-ficha .tr > li{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
@media(max-width:860px){ .sl-ficha .tr > li{grid-template-columns:1fr} }

/* ---- About: as NOTAS DE CAPA e os créditos (2026-09-24) -------------------------------------
   Mesma família do Practice: as etiquetas de secção (Purpose / Vitor Pinheiro / Background) usam o
   mesmo `.tr-side` dos lados do disco, e os créditos usam a mesma grelha de duas colunas. ⚠️ Aqui
   os termos NÃO vão um por linha: são quatro grupos de cinco ou seis, e empilhá-los dava uma
   página de trinta linhas soltas. Ficam corridos, mas no tamanho do texto — não em maiúsculas
   minúsculas, que era o que fazia isto parecer uma legenda. */
.sl-sec p.ab-big,.ab-big{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.35;color:var(--ink);
  max-width:24em;margin:0 0 1.1em}
.ab-quem{display:grid;grid-template-columns:116px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ab-quem .sl-portrait{margin:0}
.ab-quem p:first-child{margin-top:0}
@media(max-width:700px){ .ab-quem{grid-template-columns:1fr} }
.cr{margin:0}
.cr > div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(4px,1vh,8px) clamp(20px,4vw,56px);
  padding:clamp(18px,2.8vh,26px) 0;border-top:1px solid var(--rule)}
.cr dt{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.3;color:var(--ink)}
.cr dd{margin:0;font-size:1rem;line-height:1.85;color:var(--soft)}
@media(max-width:860px){ .cr > div{grid-template-columns:1fr} }

/* ---- Contact: o endereço é a acção principal e tem o tamanho disso (2026-09-24) ---- */
.ct-mail{margin:0 0 .4em;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.3}
.ct-acoes{margin:0 0 clamp(30px,5vh,46px);font-size:1.06rem;line-height:1.8}
.ct-acoes span{color:var(--soft);padding:0 .3em}
.ct-modos{margin:0;font-size:1rem;line-height:1.85;color:var(--soft);max-width:40em}

/* ---- Contact: as três maneiras de chegar, como faixas (2026-09-24) -------------------------
   O texto estava bom e a página não funcionava: era tudo empilhado numa coluna, com secções de
   uma linha cada — o esqueleto da página About sem nada dentro. Numa página de contacto as ACÇÕES
   são o conteúdo, e estavam reduzidas a uma linha de ligações. Cada uma passa a ocupar uma faixa
   inteira, com a mesma régua das outras páginas.
   ⚠️ A seta é desenhada com bordas, não escrita: os subconjuntos das fontes NÃO têm →, e um
   carácter em falta cai noutra fonte. */
.vias{list-style:none;margin:clamp(30px,5vh,48px) 0 clamp(34px,6vh,56px);padding:0;border-top:1px solid var(--rule)}
.vias li{border-bottom:1px solid var(--rule)}
.vias a{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.8vh,26px) 4px;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.25;
  transition:color .18s ease,padding-left .18s ease}
.vias a::after{content:"";flex:none;width:.42em;height:.42em;margin-right:.3em;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);
  opacity:.45;transition:opacity .18s ease,transform .18s ease}
.vias a:hover,.vias a:focus-visible{color:var(--accent);padding-left:12px}
.vias a:hover::after,.vias a:focus-visible::after{opacity:1;transform:rotate(45deg) translate(3px,-3px)}

/* ---- Contact: o disco POUSADO na página, e o texto a correr à volta (2026-09-24) -----------
   Duas tentativas antes: faixas com setas (um menu de definições) e o rótulo a conter os links
   (*"o texto fica super escondido no círculo"*). O veredicto do Vitor foi outro, e mais fundo:
   *"o pior é o lado esquerdo — a organização do texto é que é estranha, standard/rígida/linear.
   A página de contacto pode quebrar um pouco o formato do site."*

   Então quebra. Aqui NÃO há etiquetas em mono com régua por baixo, nem secções empilhadas: o
   endereço é uma frase grande, o rótulo flutua e o texto corre à VOLTA dele (`shape-outside`),
   e o resto desce em peso decrescente. É a única página do site sem a grelha de duas colunas —
   de propósito. ⚠️ Não "arrumar" isto para ficar igual às outras: a diferença é o ponto. */
.ct-livre{max-width:min(880px,94vw)}
body:has(.ct-livre) .sl-peek{display:none}   /* dois discos ao mesmo tempo brigam */

.rot{float:right;shape-outside:circle(50%);shape-margin:clamp(18px,3vw,34px);
  width:min(330px,62vw);aspect-ratio:1;border-radius:50%;
  margin:clamp(-170px,-11vh,-90px) 0 clamp(20px,3vh,30px) clamp(24px,4vw,48px);
  background:radial-gradient(circle at 50% 38%,#12d2e6 0%,var(--accent) 58%,#039fb0 100%);
  box-shadow:0 0 0 1px rgba(226,234,227,.10),0 26px 60px -28px rgba(0,0,0,.9);
  display:grid;place-items:center;color:#07202a;transform:rotate(-4deg)}
.rot-aro{position:absolute;inset:0;width:100%;height:100%}
.rot{position:relative}
.rot-aro text{font-family:var(--mono);font-size:3.5px;letter-spacing:.42px;fill:rgba(7,32,42,.5)}
.rot-in{position:relative;z-index:1;width:76%;text-align:center}
.rot .wm-mark{display:block;width:26px;height:26px;margin:0 auto .3em;color:#07202a;overflow:visible}
.rot .wm-dot{fill:var(--dot)}
.rot-marca{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,3vw,1.3rem);line-height:1.1}
.rot-marca em{font-style:italic}
.rot-sub{margin:.45em 0 0;font:9px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(7,32,42,.6)}
.rot-furo{display:block;width:11px;height:11px;margin:clamp(9px,2vw,13px) auto;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.rot-fim{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2.6vw,1.2rem);
  color:rgba(7,32,42,.78)}

/* o endereço é a frase da página, não um item de uma lista */
/* ⚠️ nada de `word-break`: partia o endereço a meio da palavra. O tamanho é que cede. */
.ct-email{margin:clamp(34px,6vh,58px) 0 .2em;font-family:var(--serif);
  font-size:clamp(1.35rem,3.6vw,2.3rem);line-height:1.2;overflow-wrap:break-word}
.ct-email a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:.06em;transition:color .18s ease,border-color .18s ease}
.ct-email a:hover,.ct-email a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.ct-mais{margin:0 0 clamp(34px,6vh,54px);display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,34px);
  font-size:1.06rem;line-height:2}
.ct-mais a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--rule);
  transition:color .18s ease,border-color .18s ease}
.ct-mais a:hover,.ct-mais a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* o convite é o único bloco desalinhado da página, e é para ser */
.ct-rio{margin:0 0 clamp(40px,7vh,70px);margin-left:clamp(0px,6vw,64px);
  font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.4;
  color:var(--ink);max-width:22em}
/* o que vem depois do disco ocupa a largura toda outra vez */
.ct-livre .sl-meta{clear:right}
.ct-modos{clear:right;margin:0 0 clamp(22px,4vh,34px);font-size:.94rem;line-height:1.9;color:var(--soft);max-width:44em}
.ct-livre .sl-meta a{color:var(--soft)}

@media(max-width:700px){
  .rot{float:none;shape-outside:none;margin:clamp(26px,5vh,40px) auto !important;width:min(290px,72vw)}
  .ct-rio{margin-left:0}
}

/* ---- o formulário (2026-09-24) ------------------------------------------------------------
   ⚠️ ESTAS REGRAS JÁ EXISTIRAM E EU APAGUEI-AS SEM DAR POR ISSO: ao refazer o Contact cortei o
   ficheiro a partir de um marcador (`c[:c.index(...)]`) e levei atrás tudo o que tinha sido
   acrescentado DEPOIS desse marcador. O formulário foi para a rua em bruto, com as caixas
   brancas do browser. Não apanhei porque verifiquei erros de JS e pedidos falhados — e uma
   regra de CSS em falta não é nenhum dos dois. ⚠️ Cortar por marcador é apagar às cegas: ou se
   remove o bloco exacto (do marcador até ao próximo), ou não se remove.
   As classes e os ids são os mesmos de sempre: o js/site.js lê-os. */
.intake{margin:clamp(30px,5vh,48px) 0 0;max-width:38em}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,24px)}
@media(max-width:620px){ .f-grid{grid-template-columns:1fr} }
.f{margin:0 0 clamp(16px,2.6vh,24px)}
.f label{display:block;margin-bottom:.5em;font:11px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft)}
.f input,.f textarea{display:block;width:100%;padding:12px 14px;font:1rem/1.6 var(--sans);
  color:var(--ink);background:color-mix(in oklab,var(--ink) 5%,var(--paper));
  border:1px solid var(--rule);border-radius:2px;transition:border-color .18s ease}
.f textarea{resize:vertical;min-height:8.5em}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--accent)}
.f-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(8px,1.6vh,14px)}
.submit{padding:12px 30px;font:1rem/1 var(--sans);color:var(--paper);background:var(--accent);
  border:0;border-radius:999px;cursor:pointer;transition:opacity .18s ease}
.submit:hover,.submit:focus-visible{opacity:.86}
.submit[disabled]{opacity:.5;cursor:default}
.form-status{font:12px/1.6 var(--mono);letter-spacing:.06em;color:var(--soft)}
.form-done,.form-sent{margin-top:clamp(22px,4vh,34px);padding-top:clamp(20px,3.4vh,28px);
  border-top:1px solid var(--rule)}
.form-done-h{margin:0 0 .4em;font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.55rem);color:var(--ink)}
.form-done p,.form-sent p{margin:0 0 .7em;font-size:1rem;line-height:1.74;color:var(--soft);max-width:36em}
.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.copy-btn{padding:8px 16px;font:12px/1 var(--mono);letter-spacing:.06em;color:var(--ink);
  background:none;border:1px solid var(--rule);border-radius:999px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.copy-btn:hover,.copy-btn:focus-visible{color:var(--accent);border-color:var(--accent)}
.copy-status{font:12px/1 var(--mono);letter-spacing:.06em;color:var(--accent)}
/* o formulário vem depois do disco: ocupa a largura toda outra vez */
.ct-livre .intake{clear:right}
/* a linha de rodapé da página não encosta ao botão */
.ct-livre .sl-meta{margin-top:clamp(32px,5vh,48px)}