/* ============================================================================
   front.css — A HOMEPAGE "READ / BUILD / WALK".

   Implementa o `docs/front_page_claude_code_handoff_v2.md`. Só a homepage: as
   outras páginas continuam com o `main.css`. Carregada DEPOIS do main.css e do
   palettes.css, por isso pode assumir os tokens deles.

   ⚠️ CADA SECÇÃO TEM COMPOSIÇÃO DIFERENTE, DE PROPÓSITO (§6).
   O handoff proíbe o template de "três cartões numa linha" repetido, e a razão
   é editorial: se todas as secções tiverem a mesma forma, a página deixa de
   argumentar e passa a listar. Daí não haver aqui uma classe genérica de
   secção com variantes — há dez composições.

   ⚠️ O MÓVEL É RECOMPOSTO, NÃO ENCOLHIDO (§6). As media queries no fim mudam a
   ordem e a estrutura, não só os tamanhos. O caso que importa é o R&D: em
   390px um diagrama de duas pistas não se lê, então as pistas empilham e o
   texto do conector passa a ser conteúdo visível em vez de uma seta.
   ========================================================================= */

/* ---------------------------------------------------------------- shell --- */
/* ⚠️ NO `main`, NÃO EM `.page-home`. Estes tokens estiveram presos à classe da
   homepage; o about.html é `.page-about`, herdava `--pad` indefinido, e o
   `padding-inline:var(--pad)` do `.fs-in` colapsava a zero — o nome "Vitor
   Pinheiro" ficava cortado contra a borda esquerda. Esta folha só é carregada
   por quem a usa, portanto `main` é o âmbito certo. */
main{ --shell:1440px; --content:1280px; --pad:clamp(20px,4.6vw,72px);

  /* ⚠️ A HOMEPAGE PASSA A SER TODA EM SANS (2026-09-13, a pedido: "a normal
     one"). Uma linha só, aqui: `--font-display` é redefinido no âmbito do
     `main`, portanto todas as regras desta folha que pedem
     `var(--font-display,"Newsreader")` — H2, âncoras, rótulos, o mapa R&D —
     mudam juntas e sem ficar meia página em serifa e outra meia em sans.
     ⚠️ E SÓ A HOMEPAGE. Esta folha é carregada apenas pelo index.html (o
     about/work/start leem só o main.css), por isso o Newsreader continua
     intacto nas páginas internas. Se um dia isto passar a ser global, muda-se
     o token no main.css e apaga-se esta linha — não se duplica. */
  --font-display: var(--font-body);

  /* ⚠️ ESCALA REDUZIDA (§3 da v4). A página anterior tinha a H1 a 7.3rem e as
     H2 a 5rem: cada secção lia-se como um cartaz, e o §13 pergunta
     explicitamente se algum título ocupa mais de ~40% da altura da janela.
     Estes valores são os do handoff, não uma interpretação. */
  /* ⚠️ MEDIDO, DEPOIS REDUZIDO OUTRA VEZ (2026-09-10). A queixa era "grande
     demais e apertado". A medição mostrou que não eram as margens entre
     secções: era a PROPORÇÃO dentro delas — H2 de 46px seguidas de 11px de
     ar, H1 de 75px em três linhas. Um título grande com pouco espaço por
     baixo lê-se como aperto mesmo com a secção inteira folgada. */
  /* ⚠️ O HERO É A PÁGINA. Sem visual e sem botões, a frase pode ocupar a
     largura toda — que é o efeito da referência (munichmusiclabs.com). O
     valor de `vw` foi ajustado até "We build paths.", a linha mais longa,
     chegar perto da margem sem lá bater: ver a medição no CLAUDE.md. */
  /* ⚠️ MEDIDO COM AS FONTES REAIS, NÃO ESTIMADO (2026-09-13) — e foi a falta
     desta medição que produziu o bug relatado. Em IBM Plex Sans a -.03em de
     tracking, "We build paths." (a mais longa das três) mede **6.425em**. A
     medida útil é min(1280px, vw) menos 2×`--pad`: 1136px a partir de 1565px
     de janela, e 350px numa tela de 390px. Os tectos são portanto
     1136/6.425 = 177px e 350/6.425 = 54px.
     O valor antigo (11rem = 176px) encostava ao tecto com 1px de folga: na
     janela de 1700px do Vitor a linha partia em duas e a segunda metade caía
     por cima da linha seguinte. Era isso o "hero partido" do print — não a
     animação. 12.6vw fica abaixo dos dois tectos em toda a escala (49px a
     390px, 152px no topo) com ~10% de folga. */
  --hero-h1:    clamp(2.3rem, 12.6vw, 9.5rem);
  /* Títulos de secção maiores outra vez — mas com o ar em `em`, que é o que
     resolveu o aperto da última vez. Grande já não implica apertado. */
  --section-h2: clamp(2.1rem, 3.5vw, 4.4rem);
  --lede:       clamp(1.02rem, 1.15vw, 1.18rem);
  --body:       .97rem;
  --eyebrow:    .71rem;

  /* ⚠️ O AR MEDE-SE EM `em`, NÃO EM `px`. Assim o espaço por baixo de um
     título cresce com o título, e a proporção mantém-se em todas as larguras
     — que é exactamente o que estava errado antes. */
  --after-h2:   .78em;
  --after-lede: 2.1em;
}

/* ⚠️ O RODAPÉ FICA FORA DO `main`, PORTANTO FICA FORA DO TOKEN ACIMA.
   Com a homepage toda em sans, "Vitor Pinheiro" no rodapé era a única coisa
   que continuava em Newsreader — lia-se como um descuido, não como uma
   escolha. Isto corrige-o SÓ AQUI: esta folha é carregada apenas pelo
   index.html e a regra está presa a `.page-home`, portanto o about/work/start
   mantêm o rodapé em serifa, igual ao resto dessas páginas. Se um dia o site
   inteiro passar a sans, o sítio de o fazer é o token `--font-display` do
   main.css — e esta regra desaparece. */
.page-home .site-footer .ft-name{ font-family:var(--font-body); font-weight:500; }

/* ⚠️ 96–120px, NÃO 140–180px (§3). As secções são conduzidas pelo conteúdo;
   esticá-las era o que fazia a página parecer uma sequência de cartazes. */
.fs{ position:relative; padding-block:clamp(64px,7.5vw,120px); }
.fs-in{ max-width:var(--content); margin-inline:auto; padding-inline:var(--pad); }
/* 12 colunas no desktop; o que muda por secção é QUEM ocupa o quê. */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(16px,2.2vw,32px); }

.h2{ font-family:var(--font-display,"Newsreader"),Georgia,serif; font-weight:400;
     font-size:var(--section-h2); line-height:1.04; letter-spacing:-.014em;
     margin:0 0 var(--after-h2); text-wrap:balance; max-width:20ch; }
/* o CTA final pode ser o maior desta secção, mas continua na escala reduzida (§10) */
.h2--big{ font-size:clamp(2.1rem,3vw,3.4rem); max-width:17ch; }
/* ⚠️ `.06em` de espacejamento, não `.14em`. Com o valor antigo o eyebrow do
   hero — que é a frase mais longa dos oito — partia em duas linhas e parecia
   um erro. É o texto que é comprido; o espacejamento é que não ajudava. */
/* ⚠️ `max-width:none` — E ESTE ERA O BUG.
   O `main.css` tem um `p{max-width:58ch}` global (medida de leitura). O
   eyebrow é um `<p>`, mas em fonte mono 58ch são 395px, e a frase mais longa
   dos oito eyebrows — a do hero — parte em duas linhas contra uma coluna de
   656px que estava vazia à direita. Um rótulo não é prosa: não leva medida de
   leitura. Andei a mexer no espacejamento a tentar resolver o sintoma. */
.eyebrow{ font-size:var(--eyebrow); letter-spacing:.06em; text-transform:uppercase;
          color:var(--ink-soft); margin:0 0 1.6em; max-width:none; }
/* ⚠️ ~70 caracteres por linha, no máximo (§3). */
.lede{ font-size:var(--lede); line-height:1.66; color:var(--ink-soft); max-width:58ch; }
.lede p{ margin:0 0 .9em; }
.anchor{ font-family:var(--font-display,"Newsreader"),Georgia,serif;
         font-size:clamp(1.08rem,1.4vw,1.42rem); line-height:1.36; color:var(--ink);
         margin:0; max-width:24ch; text-wrap:balance; }
.anchor--wide{ max-width:34ch; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
                  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ⚠️ Sem `endless ambient motion` nas linhas (§7): cada traçado corre UMA vez,
   quando a secção entra, e fica. O estado final é o estado por omissão para
   quem tem reduced-motion — ver o bloco no fim. */
.draw{ stroke-dasharray:1; stroke-dashoffset:1;
       transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1); }
.is-drawn .draw{ stroke-dashoffset:0; }

/* ------------------------------------------------------- 01 · HERO -------- */
/* Sem visual, sem botões: a tipografia é o conteúdo. A frase encosta ao fundo
   do ecrã e a régua separa-a da camada de apoio, como na referência. */
.fs-hero{ min-height:92svh; display:flex; align-items:flex-end;
          padding-top:clamp(96px,16svh,180px); padding-bottom:clamp(36px,5vw,64px);
          overflow-x:clip; }
.fs-hero .fs-in{ width:100%; }
/* ⚠️ 2026-09-13 — O HERO FOI REDESENHADO, E O QUE SAIU SAIU POR MEDIÇÃO.
   Antes: Newsreader, a linha do meio recuada `clamp(20px,7vw,110px)` e em
   contorno (`-webkit-text-stroke`). Três defeitos reais, não de gosto:
     1. o tamanho não tinha folga (ver `--hero-h1`) e a 1700px a linha do meio
        partia em duas e sobrepunha-se à de baixo;
     2. o recuo competia com o próprio tamanho — era mais uma restrição na
        mesma medida, e foi o que forçou o tamanho para o limite;
     3. o contorno, sobre o fundo vivo, lia-se como texto por carregar.
   Agora: um tipo (o sans do corpo), um tamanho, uma linha cada. A hierarquia
   está no PESO — o verbo em 500, "We" e "paths." em 400 — que é o que faz o
   olho ler *read · build · walk* sem precisar de efeito nenhum. */
.hero-h1{ font-family:var(--font-display,"Newsreader"),Georgia,serif; font-weight:400;
          font-size:var(--hero-h1); line-height:.98; letter-spacing:-.03em;
          margin:0; color:var(--ink); }
.hero-line{ display:block; overflow:hidden; }
/* ⚠️ `nowrap` É UMA TRAVA, NÃO A CORREÇÃO. A correção é o tamanho medido no
   token. Isto existe para que, se a copy do hero crescer um dia, a linha
   estoire de forma óbvia em vez de voltar a partir em silêncio por cima da
   seguinte — o modo de falha que esta versão substitui. */
.hero-line > span{ display:block; white-space:nowrap; }
/* O verbo é o que muda entre as três linhas; é ele que leva o peso.
   ⚠️ IBM Plex Sans está carregado em 400 e 500 e mais nada (css/fonts.css).
   Pedir 600 ou 700 aqui dá um negrito sintético do browser — mais escuro,
   mais largo, e a medida acima deixa de bater. */
.hero-verb{ font-style:normal; font-weight:500; }
/* UM SÓ "We" (2026-09-15): à esquerda, alinhado com a primeira linha; as três frases em pilha. */
.hero-h1--we{ display:grid; grid-template-columns:auto auto; justify-content:start; column-gap:.26em; }
.hero-we{ display:block; line-height:.98; }
.hero-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
            gap:clamp(16px,3vw,56px); align-items:start;
            margin-top:clamp(32px,4.5vw,64px); padding-top:clamp(20px,2.4vw,32px);
            border-top:1px solid var(--rule,rgba(20,11,8,.16)); }
.hero-eyebrow{ font-size:var(--eyebrow); letter-spacing:.06em; text-transform:uppercase;
               color:var(--ink-soft); margin:0; max-width:none; }
.hero-body{ font-size:var(--lede); line-height:1.6; color:var(--ink); margin:0;
            max-width:52ch; }

/* --------------------------------------------------- 02 · WHAT WE DO ----- */
/* §4: a âncora prática. Três colunas editoriais — rótulo, uma frase, lista
   compacta, réguas finas.
   ⚠️ SEM CARTÕES E SEM SOMBRAS. E sem "badges": o §13 pergunta se há espaço a
   respirar à volta da terminologia, e enfiar palavras-chave em cápsulas é
   exactamente o oposto — vira um catálogo de consultora. */
.wd-head{ grid-column:1 / span 5; }
.wd-cols{ grid-column:1 / -1; margin-top:clamp(44px,5.5vw,84px);
          display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,72px); }
.wd-col{ padding-top:1.4em; border-top:1px solid var(--rule,rgba(20,11,8,.16)); }
.wd-label{ font-family:var(--font-display,"Newsreader"),Georgia,serif; font-weight:400;
           font-size:clamp(1.3rem,1.9vw,1.75rem); line-height:1.16; margin:0 0 .5em; }
.wd-note{ font-size:var(--body); line-height:1.6; color:var(--ink-soft);
          margin:0 0 2.2em; max-width:32ch; }
/* 2026-09-11: o índice — uma linha por coluna (as listas foram para o mapa R&D). */
.wd-line{ font-family:var(--font-display,"Newsreader"),Georgia,serif;
          font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.45; color:var(--ink-soft);
          margin:0; max-width:30ch; }
/* ⚠️ `.72em` de intervalo, não `.36em`. Medido: 4,8px de ar entre itens de
   13px — uma lista de oito termos assim é um bloco, não uma lista. */
.wd-list{ list-style:none; margin:0; padding:0; display:grid; gap:.72em; }
.wd-list{ text-transform:none; }
.wd-list li{ font-size:.82rem; line-height:1.45; color:var(--ink); letter-spacing:.005em; }
/* ⚠️ Fecha a secção que a explica, em vez de abrir a página (mudou do hero). */
.wd-terms{ grid-column:1 / -1; list-style:none; display:flex; flex-wrap:wrap;
           margin:clamp(44px,5.5vw,80px) 0 0; padding:1.5em 0 0;
           border-top:1px solid var(--rule,rgba(20,11,8,.16));
           font-size:.86rem; letter-spacing:.01em; text-transform:none; color:var(--ink); }
.wd-terms li{ white-space:nowrap; }
.wd-terms li:not(:last-child)::after{ content:"·"; color:var(--ink-ghost); margin:0 .8em; }

/* ------------------------------------------------------- 03 · THESIS ------ */
/* ⚠️ O ESTADO POR OMISSÃO É VERTICAL. Tudo o que se segue descreve uma pilha
   de cinco painéis que se lê de cima para baixo — sem JavaScript, em janela
   estreita, ou com `prefers-reduced-motion`, é ISTO que aparece, e continua a
   contar a mesma coisa. O modo horizontal é a camada `.hs-on`, mais abaixo. */
.th-in{ width:100%; }
.th-track{ display:grid; gap:clamp(36px,5vw,72px); }
.th-panel{ display:grid; gap:.7em; align-content:center; }
.th-h2{ margin:0; max-width:16ch; }
.th-panel--lede .lede{ max-width:44ch; }
.th-num{ font-size:var(--eyebrow); letter-spacing:.12em; color:var(--accent); }
.th-text{ font-family:var(--font-display,"Newsreader"),Georgia,serif;
          font-size:clamp(1.3rem,2.1vw,2rem); line-height:1.24; margin:0;
          max-width:18ch; text-wrap:balance; }

/* ---- o modo horizontal, ligado pelo JS ----
   ⚠️ A ALTURA DA SECÇÃO É O CURSO DO SCROLL. A secção fica alta, o interior
   cola-se ao ecrã, e o que rola verticalmente é traduzido em deslocação
   lateral. O `--p` (0..1) vem do `front.js`. Quando a secção acaba, a página
   volta a rolar normalmente — sem hijack, sem snap: quem rolar para trás
   desfaz o movimento na mesma proporção. */
.fs-thesis.hs-on{ padding-block:0; height:var(--hs-h,320svh); }
.fs-thesis.hs-on .th-stick{ position:sticky; top:0; height:100svh;
                            display:flex; align-items:center; overflow:hidden; }
.fs-thesis.hs-on .th-track{
  display:flex; align-items:center; gap:clamp(56px,8vw,140px);
  /* ⚠️ FOLGA NO FIM DO CURSO. Sem ela o último passo acaba encostado à margem
     direita — tecnicamente visível, mas nunca chega a uma posição em que se
     leia com calma. Este `padding` entra no `scrollWidth`, portanto alonga o
     curso na mesma medida e a frase termina afastada da borda. */
  padding-right:clamp(80px,14vw,260px);
  width:max-content; will-change:transform;
  transform:translate3d(calc(var(--p,0) * (var(--hs-shift,0px) * -1)),0,0); }
.fs-thesis.hs-on .th-panel{ flex:0 0 auto; align-content:center; }
.fs-thesis.hs-on .th-panel--head{ max-width:min(46vw,620px); }
.fs-thesis.hs-on .th-panel--lede{ max-width:min(34vw,440px); }
.fs-thesis.hs-on .th-panel--step{ max-width:min(30vw,380px);
  /* cada passo acende quando chega ao meio do ecrã */
  opacity:.34; transition:opacity .45s ease; }
.fs-thesis.hs-on .th-panel--step.is-on{ opacity:1; }

/* ------------------------------------------------------ 04 · R&D -------- */
/* Cascata: Research, e mais abaixo e à direita, Development. As alturas
   diferentes são o que deixa a pauta da margem ler "Research leva a
   Development" como uma descida. Sem diagrama em linha — a pauta desenha.
   ⚠️ Padding de cima curto: a secção vinha a meio ecrã de distância da tese
   (o painel colado da tese acaba centrado, e o resto do ecrã fica vazio). */
.fs-rd{ padding-top:clamp(56px,7vw,112px); background:var(--paper-band,#BAC1E2); }
/* ⚠️ 2026-09-11 — O R&D TEM FUNDO PRÓPRIO: um ultramarino claro da família das
   figuras do navy (#9AA6D6 a 65% sobre o papel), para a página descer papel →
   banda azul → a secção escura do Walk. Medido sobre a banda: título 9.6:1,
   corpo (--ink-soft) 4.96:1, etiquetas mono (--accent) 7.4:1. O #9AA6D6 puro
   deixaria o corpo em 4.24:1, abaixo do piso. Cobre o campo vivo, como a
   secção escura já cobria. O padding de cima cresceu (era 8–32px) porque com
   fundo o título colava à borda da banda; a margem negativa do modo lateral
   ficou igual, portanto a banda começa onde a secção sempre começou e o título
   desce ~70px. A pauta da margem continua na cópia de tinta (a banda é clara).
/* ⚠️ O VÃO NÃO ERA O PADDING. Com a tese em modo lateral, o painel colado tem
   100svh e os passos ficam a meio dele — quando a tese solta, a metade de
   baixo do ecrã está VAZIA, e o R&D só começa depois dela: ~400px de nada
   mesmo com o padding a zero. O R&D sobe por cima dessa metade vazia (é
   transparente; o DOM posterior pinta por cima), e o título aparece a subir
   enquanto o último passo ainda está no ecrã. Só em modo lateral — na pilha
   vertical não há metade vazia nenhuma. */
.fs-thesis.hs-on + .fs-rd,
.fs-thesis.hs-on + .fs-map{ margin-top:calc(-1 * min(30svh, 280px)); }
.rd-h2{ grid-column:1 / span 8; grid-row:1; }
.rd-block{ padding-top:1.3em; border-top:1px solid var(--rule,rgba(20,11,8,.16)); }
.rd-block--read { grid-column:1 / span 5; grid-row:2; margin-top:clamp(28px,4vw,60px); }
.rd-block--build{ grid-column:6 / span 5; grid-row:3; margin-top:clamp(36px,5.5vw,88px); }
.rd-tag{ font-size:var(--eyebrow); letter-spacing:.14em; text-transform:uppercase;
         color:var(--accent); margin:0 0 .8em; }
.rd-title{ font-family:var(--font-display,"Newsreader"),Georgia,serif; font-weight:400;
           font-size:clamp(1.35rem,1.95vw,1.85rem); line-height:1.14; margin:0 0 .7em; }
.rd-body{ font-size:var(--body); line-height:1.6; color:var(--ink-soft); max-width:34ch;
          margin:0; }

/* ------------------------------------------------------ 04 · O MAPA R&D --- */
/* ⚠️ 2026-09-11 — RESEARCH · MÉTODOS · DEVELOPMENT num só mapa (o bloco
   `rdmap:` do home.yaml). Substitui a secção R&D e a secção Method. Ofertas
   em serifa (o que se contrata), métodos em mono (os instrumentos). As linhas
   são de RELAÇÃO — sem larguras, sem setas. O js/map.js desenha-as a partir
   das posições de layout reais do texto, em PIXELS (viewBox = tamanho da
   caixa, sem escala): o pathLength e o tracejado concordam, e não há
   `non-scaling-stroke` (ver what-broke). Sem JS: três colunas legíveis, e
   cada oferta traz os seus métodos em texto (`.map-uses`). A banda azul era
   do R&D antigo e passou para aqui. */
.fs-map{ background:var(--paper-band,#BAC1E2); padding-top:clamp(64px,8vw,128px); }
.map-h2{ grid-column:1 / span 8; }
.map{ grid-column:1 / -1; position:relative; display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);
      column-gap:clamp(56px,7.5vw,136px); margin-top:clamp(44px,5.5vw,84px); }
.map-lines{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.map-col{ display:flex; flex-direction:column; min-width:0; }
.map-col--research{ text-align:right; }
.map-col--methods{ text-align:center; }
.map-col--development{ text-align:left; }
.map-head{ margin:0 0 clamp(22px,3vw,40px); max-width:none;
           display:flex; flex-direction:column; gap:.35em; }
.map-label{ font-size:var(--eyebrow,.72rem); letter-spacing:.14em; text-transform:uppercase;
            color:var(--accent); }
.map-sub{ font-family:var(--font-display,"Newsreader"),Georgia,serif;
          font-size:clamp(1rem,1.15vw,1.12rem); color:var(--ink-soft); }
/* as ofertas espalham-se pela altura da coluna do meio, para as linhas abrirem em leque */
.map-list{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column;
           justify-content:space-around; gap:.6em; }
.map-col--methods .map-list{ justify-content:space-between; gap:.85em; }
.map-item{ -webkit-appearance:none; appearance:none; background:none; border:0; margin:0;
           padding:.2em 0; width:100%; font:inherit; color:var(--ink); text-align:inherit;
           cursor:pointer; transition:opacity .3s ease; }
.map-item:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.map-name{ display:inline-block; max-width:100%;
           font-family:var(--font-display,"Newsreader"),Georgia,serif;
           font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.22; }
.map-item--method .map-name{ font-family:var(--font-mono); font-size:clamp(.78rem,.9vw,.88rem);
                             letter-spacing:.01em; line-height:1.35; }
.map-item[aria-pressed="true"] .map-name{ text-decoration:underline; text-decoration-thickness:1px;
                                          text-decoration-color:var(--accent); text-underline-offset:.2em; }
.map-uses{ position:absolute; width:1px; height:1px; overflow:hidden;
           clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.map-ln{ fill:none; stroke:var(--accent); stroke-width:1; opacity:.32;
         stroke-dasharray:1 2; stroke-dashoffset:1;
         transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1) calc(var(--i,0) * 30ms),
                    opacity .3s ease, stroke-width .3s ease; }
.fs-map.is-drawn .map-ln{ stroke-dashoffset:0; }
/* foco (hover transitório / clique fixa): o item, os seus vizinhos e as linhas entre eles */
.map.is-focus .map-ln{ opacity:.07; }
.map.is-focus .map-ln.is-on{ opacity:.95; stroke-width:1.6; }
.map.is-focus .map-item{ opacity:.34; }
.map.is-focus .map-item.is-on{ opacity:1; }
.map-note{ grid-column:1 / span 7; margin:clamp(36px,4.4vw,64px) 0 0; font-size:var(--body);
           line-height:1.6; color:var(--ink-soft); max-width:52ch; }
@media (max-width:900px){
  /* Três colunas e linhas não cabem: pilha Research → Métodos → Development,
     sem linhas; cada oferta mostra os seus métodos numa linha mono. */
  .map{ grid-template-columns:1fr; row-gap:clamp(36px,7vw,52px); }
  .map-lines{ display:none; }
  .map-col--research,.map-col--methods,.map-col--development{ text-align:left; }
  .map-list{ gap:.9em; }
  .map-col--methods .map-list{ gap:.55em; }
  /* ⚠️ caixa normal, sem o tracking do `.mono`: frases de palavras-chave em
     maiúsculas perdem a forma das palavras (a regra do .wd-list, e o §11). */
  .map-uses{ position:static; width:auto; height:auto; overflow:visible; clip:auto;
             clip-path:none; white-space:normal; display:block; margin-top:.35em;
             font-size:.74rem; line-height:1.5; color:var(--ink-soft);
             text-transform:none; letter-spacing:.005em; }
}

/* ---------------------------------------------------------- a pauta ------ */
/* ⚠️ A PAUTA ATRAVESSA A PÁGINA INTEIRA (v2, 2026-09-15 — js/songline.js).
   Corre por uma margem em cada secção e cruza para a outra em cada fronteira.
   A v1 (só margem direita, só mapa→Walk) está em versions/songline-v1-margem-direita-20260915/.
   ⚠️ CAMADAS: a pauta (z-index 1) fica POR CIMA dos fundos das secções e POR
   BAIXO do texto (`.fs-in` e o bloco sticky da tese em z-index 2). Assim corta a
   página sem riscar palavras. O sticky da tese leva z-index sem mudar de
   `position` — trocá-lo para relative desligava o scroll lateral.
   ⚠️ UMA CÓPIA SÓ. A v1 desenhava duas (tinta no papel, papel na secção escura);
   com a paleta wilsons a página inteira é escura e a mesma cor serve em todo o
   lado. Numa paleta clara, a secção Walk (escura) esconderia as linhas. */
.songline{ position:absolute; left:0; top:0; width:100%; pointer-events:none;
           z-index:1; overflow:visible; color:var(--ink); --sl-voice:var(--accent); }
main > section > .fs-in{ position:relative; z-index:2; }
.fs-thesis .th-stick{ z-index:2; }
/* v3: o troço da pauta da TESE é filho do bloco sticky, parado, do tamanho do
   ecrã; a deslocação lateral é um <g transform> desenhado pelo JS. ⚠️ Nada de
   `transform` CSS aqui — ver a nota dos fantasmas em js/songline.js. */
.fs-thesis .th-in{ position:relative; z-index:1; }
.songline.th-songline{ width:0; z-index:0; }
/* ⚠️ COM A PAUTA ACTIVA, AS LINHAS DECORATIVAS ANTIGAS SAEM (2026-09-15). O traço
   ondulado da Walk (`.art-stray`) e a curva de saída do fecho (`.ct-exit`)
   contavam a mesma ideia — um caminho — com outro desenho, e ao lado da pauta
   liam-se como linhas soltas. Só enquanto a pauta existe (`main.songline-on`,
   posto pelo songline.js): no telemóvel, sem pauta, voltam. */
main.songline-on .art-stray, main.songline-on .ct-exit{ display:none; }
/* As palavras da pauta (LISTEN → TRACE → UNDERSTAND → BUILD → WANDER). Itálico serifado, como as
   indicações de expressão numa partitura. ⚠️ `"Newsreader"` escrito à mão, não
   `var(--font-display)`: na homepage esse token foi redefinido para o sans (V11), e a pauta
   vive dentro do <main>. Entram a "respirar": do espaçamento largo para o final. */
.songline .sl-word-path{ fill:none; stroke:none; }
.songline .sl-word{ font-family:"Newsreader", Georgia, serif; font-style:italic; font-weight:400;
  letter-spacing:.75em; fill:var(--sl-voice); opacity:0;
  transition:opacity 1s ease, letter-spacing 1.8s cubic-bezier(.2,.8,.2,1); }
.songline .sl-word.is-on{ opacity:1; letter-spacing:.24em; }
@media (prefers-reduced-motion:reduce){ .songline .sl-word{ transition:none; letter-spacing:.24em; } }
.songline .sl-staff{ fill:none; stroke:currentColor; stroke-width:.9; opacity:.3;
                     stroke-linejoin:round; }
.songline .sl-cap{ stroke:currentColor; stroke-width:2.2; opacity:.5; }
.songline .sl-voice{ fill:none; stroke:var(--sl-voice); stroke-width:1.3; opacity:.9;
                     stroke-linecap:round; stroke-linejoin:round; }
.songline .sl-head{ opacity:0; transform:scale(.25); transform-box:fill-box;
                    transform-origin:center;
                    transition:opacity .4s ease, transform .55s cubic-bezier(.2,.8,.25,1.25); }
.songline .sl-head.is-on{ opacity:1; transform:none; }
.songline .nh{ fill:var(--sl-voice); }
.songline .nh--open{ fill:none; stroke:var(--sl-voice); stroke-width:1.6; }
.songline .stem{ stroke:var(--sl-voice); stroke-width:1.4; stroke-linecap:round; }
.songline .nh--whole{ stroke-width:1.9; }
.songline .sl-bar{ stroke:currentColor; stroke-width:1.3; }
.songline .sl-ferm{ fill:none; stroke:var(--sl-voice); stroke-width:1.5; stroke-linecap:round; }
.songline .sl-ferm-dot{ fill:var(--sl-voice); }

/* ---------------------------------------------------------- 04 · ART ----- */
/* §14: escura, de propósito. É a única inversão da página. */
/* a única secção com mais respiração que as outras, de propósito: é a inversão */
.fs-art{ background:var(--paper-dark,#141317); color:var(--paper-dark-text,#EDECE6);
         overflow:hidden; padding-block:clamp(80px,10vw,150px); }
.fs-art .h2, .fs-art .art-anchor{ color:var(--paper-dark-text,#EDECE6); }
.fs-art .eyebrow{ color:rgba(237,236,230,.56); }
.fs-art p{ color:rgba(237,236,230,.78); }
.art-stray{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* ⚠️ ESTE É O ÚNICO TRAÇADO QUE PODE SAIR DA GRELHA (§14). Atravessa margens e
   passa por trás do texto; é o que distingue WALK de READ/BUILD. Não lhe dar
   um destino visível — a secção existe para dizer que pode não haver um. */
.art-path{ fill:none; stroke:rgba(237,236,230,.30); stroke-width:1.4;
           vector-effect:non-scaling-stroke; }
.art-copy{ grid-column:1 / span 6; position:relative; z-index:1; }
/* 2026-09-13: sem o placeholder (e enquanto não houver artefacto real), a coluna
   da direita ficava vazia — a copy ocupa-a, em vez de deixar um buraco. */
.fs-art:not(:has(.art-work)) .art-copy{ grid-column:1 / span 8; }
.art-body{ max-width:36ch; margin-top:.2em; }
.art-body p{ margin:0 0 1.1em; font-size:clamp(1rem,1.15vw,1.16rem); line-height:1.66; }
.art-work{ grid-column:8 / -1; position:relative; z-index:1;
           margin-block:clamp(-40px,-3vw,0px) 0; }
.art-anchor{ grid-column:1 / span 8; position:relative; z-index:1;
             font-family:var(--font-display,"Newsreader"),Georgia,serif;
             font-size:clamp(1.5rem,2.6vw,2.5rem); line-height:1.2;
             margin:clamp(56px,7vw,110px) 0 0; }
.art-more{ margin-top:1.8em; }
.cta--invert{ color:var(--paper-dark-text,#EDECE6); border-bottom-color:rgba(237,236,230,.4); }

/* ------------------------------------------------------- 06 · METHOD ----- */
/* ⚠️ OS TERMOS ATRAVESSAM A PÁGINA. Estavam numa coluna à direita do título e
   oito palavras nessa largura quebravam onde calhava. Numa faixa inteira cabem
   em duas filas de verdade, e a linha que as varre tem distância para
   significar alguma coisa. */
.mt-head{ grid-column:1 / span 7; }
.mt-aside{ grid-column:9 / -1; align-self:end; }
/* ⚠️ 2026-09-11 — O CAMPO DE INSTRUMENTOS (pinheiro_site_paths_handoff_v1 §15:
   "use an instrument field… central label QUESTION… a separate route CUSTOM
   INSTRUMENT… only lines, labels and positioning; no fake nodes").
   A pergunta ao centro; à esquerda os instrumentos que LÊEM o que já existe,
   à direita os que CONSTROEM e testam — o mesmo par Read/Build da página; e
   uma rota à parte, tracejada, para "Build one when necessary".
   A geometria é autoral (docs/make-front.py) num viewBox 1000×460, e esta
   caixa tem o MESMO aspect-ratio: as percentagens das etiquetas e as
   coordenadas das linhas são um só sistema, sem medir nada em JS. */
.mt-field{ grid-column:1 / -1; position:relative; aspect-ratio:1000 / 460;
           margin-top:clamp(40px,5vw,72px); }
.mt-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible;
           pointer-events:none; }
/* ⚠️ SEM `vector-effect:non-scaling-stroke` NESTAS LINHAS. Com ele o browser
   calcula o tracejado em unidades de ECRÃ, enquanto o pathLength="1" normaliza
   o comprimento em unidades do viewBox; a caixa é desenhada ~15% maior do que
   o viewBox, portanto o traço "inteiro" cobria só ~87% da linha — cada linha
   parava 25–35px antes da etiqueta, e durante o desenho viam-se pedaços soltos
   a meio e um toco na ponta (visto em captura real). Sem o vector-effect o
   traço escala com o desenho (~1.4px a 1440, ~1.1px a 1024). O vazio 2 > 1 é
   só folga: garante que nada espreita antes de a linha começar. */
.mt-ln{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.55;
        stroke-dasharray:1 2;
        transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1) calc(var(--i,0) * 110ms); }
.mt-route{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.55;
           stroke-dasharray:4 6; }
/* ⚠️ sem data-rise aqui: a entrada anima `transform`, e estas peças usam o
   `transform` para se centrar no seu ponto — a animação desalinhava-as. */
.mt-q{ position:absolute; left:50%; top:45.65%; transform:translate(-50%,-50%);
       width:24%; margin:0; max-width:none; text-align:center;
       font-family:var(--font-display,"Newsreader"),Georgia,serif;
       font-size:clamp(1.2rem,2vw,1.9rem); line-height:1.2; color:var(--ink); }
.mt-side{ list-style:none; margin:0; padding:0; position:absolute; inset:0;
          pointer-events:none; }
.mt-i{ position:absolute; top:var(--y); transform:translateY(-50%); white-space:nowrap;
       pointer-events:auto; transition:opacity .6s ease calc(var(--i,0) * 110ms + .55s); }
.mt-side--read  .mt-i{ right:78%; text-align:right; }   /* borda direita em x=220 */
.mt-side--build .mt-i{ left:78%; }                      /* borda esquerda em x=780 */
.mt-name{ font-family:var(--font-display,"Newsreader"),Georgia,serif;
          font-size:clamp(1.05rem,1.6vw,1.6rem); line-height:1.18; letter-spacing:-.008em; }
.mt-custom{ position:absolute; left:50%; top:93.5%; transform:translate(-50%,-50%);
            margin:0; max-width:none; white-space:nowrap; font-size:var(--eyebrow);
            letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
            transition:opacity .6s ease 1.1s; }
/* As etiquetas esperam pela sua linha SÓ quando o front.js está a correr
   (é ele que põe .mt-anim, e não o põe com reduced-motion): sem JavaScript
   ficam visíveis desde o início. */
.mt-anim .mt-i, .mt-anim .mt-custom{ opacity:.25; }
.mt-anim.is-drawn .mt-i, .mt-anim.is-drawn .mt-custom{ opacity:1; }
.mt-anim .mt-route{ opacity:0; transition:opacity .8s ease .9s; }
.mt-anim.is-drawn .mt-route{ opacity:.55; }
.mt-cta{ margin-top:1.5em; }
/* O CTA por baixo do diagrama, no eixo da pergunta (2026-09-11). */
.mt-after{ grid-column:1 / -1; text-align:center; margin-top:clamp(16px,2.4vw,36px); }
.mt-after .mt-cta{ margin:0; max-width:none; }   /* o p{max-width:58ch} do main.css prendia-o à esquerda */

/* ---------------------------------------------------------- 08 · WORK ---- */
.wk-head{ grid-column:1 / span 5; }
.wk-head .cta{ margin-top:1.4em; display:inline-block; }
.wk-list{ grid-column:7 / -1; display:grid; gap:clamp(28px,4vw,52px); }
.wk-proj{ display:grid; gap:1.1em; padding-top:1.6em;
          border-top:1px solid var(--rule,rgba(20,11,8,.16)); }
.wk-mode{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
          margin:0; }
/* ⚠️ Tinha 0px por baixo: a pergunta do projecto encostava ao título. */
.wk-title{ font-family:var(--font-display,"Newsreader"),Georgia,serif; font-weight:400;
           font-size:clamp(1.2rem,1.8vw,1.62rem); line-height:1.22; margin:0 0 .2em; }
.wk-q{ font-size:clamp(1rem,1.15vw,1.14rem); line-height:1.6; color:var(--ink-soft);
       margin:0; max-width:44ch; }
.wk-out{ font-size:.78rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:52ch; }

/* ------------------------------------------------------- 09 · FOUNDER ---- */
/* §19 Opção B: não há fotografia, então o nome é que é a imagem. */
.fd-name{ grid-column:1 / span 6; font-family:var(--font-display,"Newsreader"),Georgia,serif;
          font-weight:400; font-size:clamp(2.6rem,6vw,5.4rem); line-height:1; margin:0;
          letter-spacing:-.02em; }
.fd-copy{ grid-column:8 / -1; align-self:end; }
.fd-art{ grid-column:8 / -1; margin:2.2em 0 0; }
.fd-art img{ width:100%; height:auto; display:block; }

/* -------------------------------------------- 07 · FOUNDER + CTA -------- */
/* §10 do passe de redução: uma só secção final. O founder é o MENOR dos dois e
   o CTA domina — a última coisa que a página faz é devolver a pergunta a quem
   a lê, e não apresentar-se outra vez. */
.fs-close{ position:relative; padding-bottom:clamp(140px,20vw,260px); overflow:hidden; }
.cl-founder{ grid-column:1 / span 4; }
.fd-bio{ font-size:.92rem; line-height:1.66; color:var(--ink-soft); max-width:30ch;
         margin:.9em 0 1.6em; }
.cl-founder .fd-name{ grid-column:auto; font-size:clamp(1.5rem,2.2vw,2rem);
                      letter-spacing:-.01em; margin:0; }
.cl-cta{ grid-column:1 / span 8; }   /* 2026-09-11: o founder saiu para o rodapé; o CTA fica sozinho */
.cl-cta .h2--big{ margin-bottom:.6em; }
/* 2026-09-11: a pergunta É o link para o start.html (o botão saiu). Um título
   que é link precisa de o dizer sem hover — num telemóvel não há hover —,
   portanto leva sempre um sublinhado fino na própria tinta; no hover e no
   foco passa ao acento. */
.cl-link{ color:inherit; text-decoration:underline; text-decoration-thickness:1px;
          text-underline-offset:.16em;
          text-decoration-color:color-mix(in srgb, currentColor 32%, transparent);
          transition:color .3s ease, text-decoration-color .3s ease; }
.cl-link:hover, .cl-link:focus-visible{ color:var(--accent); text-decoration-color:var(--accent); }
.cl-link:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.cl-cta .anchor{ margin-bottom:1.5em; }
.ct-exit{ position:absolute; left:0; right:0; bottom:0; width:100%; height:220px;
          pointer-events:none; }
/* ⚠️ SEM PONTO FINAL. A linha sai do enquadramento e não se fecha: nada de
   círculo terminal, nada de estado "completo". O próximo caminho é do visitante. */
.ct-path{ fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.6;
          vector-effect:non-scaling-stroke; }

/* ------------------------------------------------ about.html apenas ----- */
/* ⚠️ ÓRFÃO desde 2026-09-13: o about.html foi reescrito (handoff v5 §5-§10) e já
   não usa .fs-founder / .fs-cta / .ct-copy, nem esta folha. Fica porque apagar
   regras sem procurar quem as usa já partiu uma página aqui uma vez; sai quando
   alguém confirmar que ninguém as quer de volta. */
/* ⚠️ ESTE BLOCO EXISTE PARA UMA PÁGINA SÓ, E É POR ISSO QUE ESTÁ ROTULADO.
   O passe de redução fundiu Founder e CTA na home e apagou `.fs-founder`,
   `.fs-cta` e `.ct-copy` do CSS — mas o `about.html` usava as três, e
   silenciosamente ficou sem composição. Apagar regras com as secções é certo;
   apagá-las sem verificar quem mais as usava é o que aconteceu aqui. Se o
   about.html for reescrito, isto sai com ele. */
.fs-founder .fd-name{ grid-column:1 / span 6;
                      font-family:var(--font-display,"Newsreader"),Georgia,serif;
                      font-weight:400; font-size:clamp(2.6rem,6vw,5.4rem); line-height:1;
                      margin:0; letter-spacing:-.02em; }
.fs-founder .fd-copy{ grid-column:8 / -1; align-self:end; }
.fs-founder .fd-art{ grid-column:8 / -1; margin:2.2em 0 0; }
.fs-founder .fd-art img{ width:100%; height:auto; display:block; }
.fs-cta{ position:relative; padding-bottom:clamp(120px,18vw,240px); overflow:hidden; }
.fs-cta .h2--big{ grid-column:1 / span 9; }
.ct-copy{ grid-column:1 / span 6; margin-top:1.4em; }
@media (max-width:1024px){
  .fs-founder .fd-name{ grid-column:1 / -1; }
  .fs-founder .fd-copy,.fs-founder .fd-art{ grid-column:1 / span 6; }
  .fs-cta .h2--big,.ct-copy{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .fs-founder .fd-copy,.fs-founder .fd-art{ grid-column:1 / -1; }
}

/* ---------------------------------------------------- placeholders ------- */
/* ⚠️ TÊM DE PARECER PLACEHOLDERS. O §8 proíbe substituir por uma imagem
   qualquer, e um substituto bonito é exactamente como um placeholder é
   esquecido e publicado. Este carrega o ID e o resumo para servir de spec. */
.ph{ margin:0; }
.ph-frame{ aspect-ratio:var(--ar,4/3); display:grid; align-content:center; justify-items:start;
           gap:.4em; padding:clamp(16px,2.4vw,28px);
           border:1px dashed var(--ink-ghost); border-radius:2px;
           background:repeating-linear-gradient(-45deg,
             transparent 0 9px, rgba(20,11,8,.028) 9px 18px); }
.ph-tag{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.ph-id{ font-size:.86rem; color:var(--ink); word-break:break-all; }
.ph-ar{ font-size:.72rem; color:var(--ink-soft); }
.ph-brief{ margin:.7em 0 0; }
.ph-brief ul{ margin:0; padding-left:1.1em; }
.ph-brief li{ font-size:.74rem; line-height:1.6; color:var(--ink-soft); margin-bottom:.25em; }
.fs-art .ph-frame{ border-color:rgba(237,236,230,.34);
                   background:repeating-linear-gradient(-45deg,
                     transparent 0 9px, rgba(237,236,230,.05) 9px 18px); }
.fs-art .ph-id{ color:var(--paper-dark-text,#EDECE6); }
/* o acento navy sobre o escuro é ilegível — na inversão a etiqueta é o papel */
.fs-art .ph-tag{ color:rgba(237,236,230,.78); }
.fs-art .ph-ar,.fs-art .ph-brief li{ color:rgba(237,236,230,.6); }

/* ============================================================ responsive == */
/* §17: recompor, não encolher. */
@media (max-width:1024px){
  .grid{ grid-template-columns:repeat(8,1fr); }
  .hero-copy{ grid-column:1 / -1; }
  .hero-visual{ grid-column:1 / span 6; margin-right:0; margin-top:clamp(32px,5vw,56px); }
  .wd-head,.rd-head,.mt-head,.wk-head{ grid-column:1 / -1; }
  .wk-list{ grid-column:1 / -1; margin-top:clamp(28px,4vw,48px); }
  .th-h2{ grid-column:1 / -1; }
  .th-lede{ grid-column:1 / span 6; align-self:start; margin-top:1.2em; }
  .th-visual{ grid-column:1 / -1; }
  .mt-head{ grid-column:1 / -1; }
  .mt-aside{ grid-column:1 / -1; margin-top:1.6em; }
  .art-copy{ grid-column:1 / span 5; }
  .art-work{ grid-column:6 / -1; }
  .art-anchor{ grid-column:1 / -1; }
  .cl-founder{ grid-column:1 / -1; }
  .cl-cta{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .grid{ grid-template-columns:repeat(4,1fr); }
  .fs{ padding-block:clamp(64px,11vw,80px); }          /* §3: 64–80px no móvel */
  .hero-visual{ grid-column:1 / -1; }
  .th-steps{ grid-template-columns:1fr; gap:clamp(20px,4.5vw,32px);
             margin-top:clamp(36px,7vw,52px); }
  .th-step{ opacity:1; }
  .art-copy,.art-work,.art-anchor{ grid-column:1 / -1; }
  .art-work{ margin-top:clamp(28px,6vw,48px); }
  .cl-founder,.cl-cta{ grid-column:1 / -1; }
  /* O campo não cabe numa coluna: a pergunta primeiro, as duas famílias lado
     a lado, e a rota à parte por baixo, separada por um tracejado. Sem linhas. */
  .mt-field{ aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr;
             gap:.9em 1.4em; margin-top:clamp(32px,7vw,48px); }
  .mt-lines{ display:none; }
  .mt-q{ position:static; transform:none; width:auto; grid-column:1 / -1;
         text-align:left; margin-bottom:.3em; }
  .mt-side{ position:static; display:grid; gap:.45em; align-content:start; }
  .mt-i{ position:static; transform:none; white-space:normal; }
  .mt-side--read .mt-i{ text-align:left; }
  .mt-custom{ position:static; transform:none; grid-column:1 / -1; white-space:normal;
              padding-top:1em; border-top:1px dashed var(--ink-ghost); }
  .mt-anim .mt-i, .mt-anim .mt-custom{ opacity:1; }
  .mt-after{ text-align:left; margin-top:clamp(24px,5vw,36px); }
  /* §4: as três colunas empilham, as listas ficam compactas */
  .wd-cols{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px); }
  .wd-list{ grid-template-columns:1fr 1fr; gap:.42em 1.2em; }

  /* ⚠️ §6: o diagrama horizontal não sobrevive a uma coluna. A ordem passa a
     ser bloco Research → conector → bloco Development, e o conector é o
     próprio diagrama rodado para o eixo vertical. */
  .rd-h2,.rd-block--read,.rd-block--build{ grid-column:1 / -1; }
}

@media (max-width:430px){
  .fs-in{ padding-inline:clamp(20px,5.6vw,24px); }
  .wd-list{ grid-template-columns:1fr; }
  .hero-biz{ font-size:.72rem; }
}

/* =================================================== reduced motion ====== */
/* §7: em reduced-motion todos os traçados ficam no estado final, nada é
   scroll-linked, e a hierarquia não muda. */
@media (prefers-reduced-motion:reduce){
  .draw,.art-path,.ct-path{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important; }
  .songline .sl-head{ opacity:1 !important; transform:none !important; transition:none !important; }
  .th-step,.mt-i,.mt-custom{ opacity:1 !important; transition:none !important; }
  .map-ln{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important; }
  .map-item{ transition:none !important; }
  .mt-route{ opacity:.55 !important; transition:none !important; }
}