/* ==========================================================================
SEASON ONE · seasonone.miami
A roupa do site. Miami Insider Club.
Elephant Skin Group para BI Group USA · 1200 SW 2nd Ave, Brickell, Miami
Duas regras da casa que este arquivo faz cumprir:
1. Nenhum tamanho de tipo escrito no HTML. Só as classes .d1 a .d4 e os
corpos declarados aqui.
2. Nenhum travessão em conteúdo. Ponto, vírgula, meio-ponto ou quebra.
========================================================================== */
/* ---------- 0. FONTES, auto-hospedadas ---------- */
@font-face{font-family:"Heliora";src:url("../assets/fonts/heliora-thin.woff2") format("woff2");font-weight:100;font-display:swap}
@font-face{font-family:"Heliora";src:url("../assets/fonts/heliora-extralight.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Heliora";src:url("../assets/fonts/heliora-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Heliora";src:url("../assets/fonts/heliora-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--wine-deep)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(228,187,176,.30)}
/* ---------- 2. TOKENS ---------- */
:root{
--display:"Heliora","Inter","Helvetica Neue",Arial,sans-serif;
--ui:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
/* Miami Insider Club */
--wine-deep:#380C18;
--wine:#4A1220;
--wine-mid:#7A1E32;
--choc:#2A1216;
--cream:#F4E7D7;
--blush:#E4BBB0;
--coral:#D9563C;
--paper:#F0E2D2;
--paper-2:#E6D3C0;
/* --- A ESCALA OLHA AS DUAS MEDIDAS DA TELA. -----------------------------
A rampa media só a LARGURA, e é por isso que a página quebrava justamente
nas telas de trabalho: um notebook é largo e baixo. A 1337x595 de área
útil — que é o que sobra de um 1366x768 depois da barra do navegador — a
manchete recebia 96px de corpo por causa dos 1337 de largura, e a altura
não tinha voz nenhuma na conta. O resultado, medido: o formulário passava
220px do espaço livre, `residence` passava 94, `house` 62. O que passava ia
parar embaixo do índice fixo do rodapé ou atrás da logo.
Cada degrau agora é o MENOR entre a medida de largura e uma medida de
altura. Numa tela alta nada muda — a medida de largura continua sendo a
menor, e o desenho é exatamente o que era. Numa tela baixa a altura assume,
e o texto encolhe na proporção do espaço que existe de verdade.
`svh` e não `vh`: no celular a barra do navegador muda a altura da janela
durante a rolagem, e uma rampa de tipo em `vh` faria o texto inteiro mudar
de corpo a cada movimento da barra. `svh` é estável. */
--d1:clamp(34px,min(7.2vw,12.4svh),104px);
--d2:clamp(26px,min(4.4vw,6.4svh),62px);
--d3:clamp(20px,min(2.8vw,4.9svh),38px);
--d4:clamp(16px,min(1.8vw,3.1svh),25px);
--t-lede:clamp(15px,min(1.35vw,2.4svh),20px);
--t-body:clamp(14px,min(1.02vw,1.85svh),17px);
--t-small:clamp(12px,min(.86vw,1.5svh),14px);
/* O RÓTULO DEIXA DE SER UM NÚMERO FIXO.
Toda a rampa desta página é fluida e este degrau era o único cravado em
11px: numa tela de 2560 os rótulos ficavam do mesmo tamanho que numa de
1366, e é por isso que a linha de código da capa ficou pequena demais para
ler. O piso continua sendo 11, então em celular e em notebook baixo nada
encolhe nem cresce; o teto é 15, que é onde caixa alta com entrelinha larga
para de parecer legenda e começa a parecer texto. */
--t-label:clamp(11px,min(.82vw,1.4svh),15px);
--pad-x:clamp(22px,5vw,96px);
--gap:clamp(18px,min(3.4vw,4.6svh),56px);
/* O ESPAÇO QUE A MOBÍLIA FIXA OCUPA, declarado uma vez.
O cabeçalho mora no alto e o índice de seção no pé, os dois presos à tela.
Nenhum dos dois empurra nada, porque nenhum dos dois está no fluxo — então
o conteúdo passava por baixo deles. Reservar essa altura como piso do
respiro de cada seção é o que impede a colisão, e é a única forma que não
depende de adivinhar o tamanho do texto. */
/* o vermelho de erro do formulário: coral clareado, para passar contraste
tanto no campo vinho quanto no campo papel */
--erro:#F0A08C;
--pe-topo:62px;
--pe-base:44px;
--band:clamp(72px,9vh,140px);
--ease:cubic-bezier(.22,.61,.28,1);
--maxw:1560px;
--head-h:58px;
}
/* campos de cor. o site alterna entre o vinho e o papel */
.field{--bg:var(--wine);--bg2:var(--wine-deep);--ink:var(--cream);--mute:#C9948E;--line:rgba(244,231,215,.20);--accent:var(--blush)}
.field--deep{--bg:var(--wine-deep);--bg2:var(--choc)}
.field--mid{--bg:var(--wine-mid);--bg2:var(--wine)}
.field--choc{--bg:var(--choc);--bg2:#1B0C0F}
.field--paper{--bg:var(--paper);--bg2:var(--paper-2);--ink:var(--wine);--mute:#8A5548;--line:rgba(74,18,32,.20);--accent:var(--wine-mid);--erro:#A32B12}
/* CAMPO CORAL. A receita e a do deck, tela coral com tipo em vinho:
`.f-o2-coral` e o bloco `coral-screen` do `style.css` do playbook.
Sobre coral o proprio coral nao pode se marcar, entao o fio por baixo da
palavra vira creme e o tique antes do rotulo vira vinho. */
.field--coral{--bg:var(--coral);--bg2:#C24A32;--ink:var(--choc);
--mute:rgba(74,18,32,.82);--line:rgba(74,18,32,.30);--accent:var(--wine)}
/* Sobre coral o fio coral nao existe, entao ali ele vira creme e o tique do
rotulo vira vinho. Precisa repetir a classe do tipo: `.d2 em` pesa mais que
`.field--coral em`. */
.field--coral .d1 em,.field--coral .d2 em,.field--coral .d3 em,
.field--coral .d4 em,.field--coral .lede em,.field--coral .slip__msg em{
background-image:linear-gradient(var(--cream),var(--cream));
}
.field--coral .code::before{background:var(--wine)}.field{background:var(--bg);color:var(--ink)}
body{
font-family:var(--ui);
font-size:var(--t-body);
line-height:1.62;
background:var(--wine-deep);
color:var(--cream);
font-synthesis:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
/* ---------- 3. TIPOGRAFIA ---------- */
.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:200;letter-spacing:-.012em}
.d1{font-size:var(--d1);line-height:1.02;font-weight:100;letter-spacing:-.02em}
.d2{font-size:var(--d2);line-height:1.06}
.d3{font-size:var(--d3);line-height:1.14}
.d4{font-size:var(--d4);line-height:1.28}
.d1 em,.d2 em,.d3 em,.d4 em,.lede em,.slip__msg em{
font-style:normal;color:inherit;
background-image:linear-gradient(var(--coral),var(--coral));
background-repeat:no-repeat;
background-size:0% max(2px,.045em); /* nasce sem fio: ele é traçado na entrada */
background-position:0 92%;
padding-bottom:.06em;
transition:background-size 820ms var(--ease-rev) calc(var(--cd, var(--d, 0ms)) + 620ms);
}
.lede{font-size:var(--t-lede);line-height:1.5;max-width:58ch;color:var(--ink)}
.body{max-width:64ch}
.small{font-size:var(--t-small);line-height:1.55;color:var(--mute)}
.label{
font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);font-weight:400;
}
.mute{color:var(--mute)}
.accent{color:var(--accent)}
/* ---------- 4. ESTRUTURA ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-x);width:100%}
/* Uma seção, uma tela. Fora o rodapé, toda seção mede a altura da janela e
centra o conteúdo. Se o conteúdo passar disso, ele empurra, e é sinal de que
a seção precisa ser dividida em duas, não de que a regra deve ceder. */
section.field{
min-height:100svh;
/* o `max` é o piso: por mais que a tela encolha, o respiro nunca fica menor
que a mobília fixa que mora nessas duas bordas */
display:flex;align-items:center;
padding-top:max(var(--pe-topo),clamp(56px,9svh,150px));
padding-bottom:max(var(--pe-base),clamp(46px,9svh,150px));
}
.band{
padding-top:max(var(--pe-topo),clamp(56px,9svh,150px));
padding-bottom:max(var(--pe-base),clamp(46px,9svh,150px));
}
.band--tight{
padding-top:max(var(--pe-topo),clamp(48px,7svh,120px));
padding-bottom:max(var(--pe-base),clamp(40px,7svh,120px));
}
.band--head{padding-top:max(var(--pe-topo),clamp(64px,11svh,170px))}
.rule{height:1px;background:var(--line);border:0;margin-block:clamp(28px,3.4vw,54px)}
.cols{display:grid;gap:var(--gap)}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.cols--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.stack-s > * + *{margin-top:14px}
.stack-m > * + *{margin-top:clamp(10px,min(2vw,2.5svh),30px)}
.stack-l > * + *{margin-top:clamp(20px,min(4vw,5.6svh),60px)}
/* um respiro acima do `mt-l`, para quando a manchete pesa e o bloco de baixo
encosta nela. O `mt-l` dá 46px reais sob uma manchete de 62px, que é pouco. */
.mt-xl{margin-top:clamp(32px,min(6.4vw,9svh),104px)}
/* ---------- 5. CABEÇALHO ---------- */
/* A BARRA SAIU, E COM ELA A ÚLTIMA COISA QUE SEPARAVA A PÁGINA DA TELA.
O cabeçalho era um campo de vidro com uma pluma embaixo, e um campo de vidro
é uma faixa: ele corta a fotografia no alto e anuncia que ali começa uma
interface. Sem ele restam duas marcas soltas sobre a cena — a logo e o gesto
de abrir — e a fotografia chega até a borda de cima da tela.
O cabeçalho inteiro fica transparente ao toque; só a logo e o ícone pegam o
dedo. Sem isso, uma faixa invisível de 60 pixels de altura roubaria todo
clique no alto da página. */
.head{
position:fixed;inset:0 0 auto 0;z-index:60;
display:flex;align-items:center;
padding:18px var(--pad-x);
color:var(--cream);
pointer-events:none;
transition:color 320ms var(--ease);
}
.head > *{pointer-events:auto}
/* A TINTA DA LOGO É A TINTA DO CAMPO EM QUE ELA PISA.
Quem decide é o `site.js`, medindo. A transição é longa de propósito: uma
troca de tinta instantânea no meio da rolagem parece um defeito de
renderização; em meio segundo, parece luz mudando. */
.head--tinta-escura{color:var(--wine)}
/* UMA SOMBRA DE UM SUSPIRO, E ELA EXISTE POR UMA MEDIÇÃO.
A troca de tinta acerta onde o fundo é estável — o campo coral, as placas, o
mapa. Onde ela não tem como acertar é na galeria: os quadros passam por baixo
da marca alternando claro e escuro a cada cem pixels de rolagem, e uma tinta
que perseguisse isso PISCARIA. A escolha foi deixá-la atrasar de propósito, e
o preço é que por uma fração de segundo a marca pode estar em creme em cima
de uma sala bege.
A sombra cobre exatamente essa fração. Sobre fundo escuro ela é invisível —
preto sobre preto; sobre fundo claro ela devolve à letra o contorno que a
tinta ainda não deu. Não é um véu atrás da marca: é o mesmo recurso de
sempre, um halo do tamanho da haste. */
.head__mark{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.head__logo{
display:block;height:19px;width:auto;color:inherit;
filter:drop-shadow(0 1px 2px rgba(42,18,22,.85)) drop-shadow(0 0 16px rgba(42,18,22,.7));
}
.head--tinta-escura .head__logo{filter:drop-shadow(0 1px 2px rgba(244,231,215,.8)) drop-shadow(0 0 16px rgba(244,231,215,.65))}
.burger span{filter:drop-shadow(0 1px 2px rgba(42,18,22,.8)) drop-shadow(0 0 12px rgba(42,18,22,.6))}
.head--tinta-escura .burger span{filter:drop-shadow(0 1px 2px rgba(244,231,215,.75)) drop-shadow(0 0 12px rgba(244,231,215,.6))}
body.menu-open .head__logo,body.menu-open .burger span{filter:none}
.burger{display:block;width:34px;height:22px;position:relative;color:inherit}
/* O DESENHO TEM 34x22; O ALVO DO DEDO TEM 44x44.
Duas barras de um pixel são um desenho bonito e um alvo ruim: 34 por 22 é
menos da metade da área que a Apple pede para qualquer controle, e agora este
botão é a única navegação que existe em qualquer tela. O alvo cresce por um
pseudo-elemento posicionado, que não ocupa espaço nenhum na diagramação. */
.burger::before{
content:"";position:absolute;left:50%;top:50%;
width:44px;height:44px;transform:translate(-50%,-50%);
}
.burger span{
position:absolute;left:0;right:0;height:1px;background:currentColor;
transition:transform 420ms var(--ease),opacity 200ms,background 560ms var(--ease);
}
.burger span:nth-child(1){top:4px}
.burger span:nth-child(2){bottom:4px}
/* aberto, o ícone é um X — e ele fica SEMPRE claro, porque o que está atrás
dele deixou de ser a página e passou a ser o véu do menu */
body.menu-open .head{color:var(--cream)}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
/* --- O MENU. -------------------------------------------------------------
Não é uma tela nova por cima da página: é a MESMA página, fora de foco. O
`backdrop-filter` desfoca o que está atrás em vez de cobrir, então a cena
continua ali — reconhecível, e claramente em segundo plano. É a diferença
entre trocar de assunto e recuar um passo.
O véu de cor existe por necessidade e não por estilo: desfocar não escurece,
e sobre um quadro claro da galeria o texto creme sumiria. A camada de vinho
a 42% garante o contraste sem fechar a imagem. */
.menu{
position:fixed;inset:0;z-index:55;
/* A LISTA MORA DO LADO DO ÍCONE.
O gesto começa no canto de cima à direita e a resposta abre embaixo dele,
no mesmo eixo: a mão não atravessa a tela para ler o que ela mesma pediu.
E a borda direita alinhada dá à lista a mesma margem que a marca tem do
outro lado, o que fecha a composição em vez de deixá-la pendendo. */
display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
text-align:right;
padding:calc(64px + var(--pad-x)) var(--pad-x) var(--pad-x);
background:rgba(56,12,24,.42);
-webkit-backdrop-filter:blur(30px) saturate(150%);
backdrop-filter:blur(30px) saturate(150%);
opacity:0;visibility:hidden;
transition:opacity 520ms var(--ease),visibility 0s linear 520ms;
}
body.menu-open .menu{
opacity:1;visibility:visible;
transition:opacity 420ms var(--ease);
}
/* o índice de seção mora ACIMA do menu na pilha, e mostrar em que seção a
pessoa estava enquanto ela escolhe outra não serve para nada */
/* onde não há `backdrop-filter` o véu fecha, porque um menu semitransparente
sobre uma página nítida é ilegível */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.menu{background:rgba(56,12,24,.97)}
}
.menu__lista{display:flex;flex-direction:column;gap:clamp(2px,.8vh,12px)}
/* `block` e não `flex`: o número é um `inline-block` de largura fixa dentro da
linha. Com `flex`, cada palavra que o SplitText cria viraria um item da
caixa e a frase se espalharia pela linha inteira. */
.menu a{
display:block;
font-family:var(--display);font-weight:100;
font-size:clamp(30px,6.6vw,72px);line-height:1.18;
color:var(--cream);
transition:color 300ms var(--ease);
}
/* O número vira sufixo sem trocar a marcação: a ordem no HTML continua sendo
número-e-depois-nome, que é como os três dicionários de idioma escrevem
esses itens — mexer nisso seria mexer em três arquivos de tradução para
resolver um problema de desenho.
Ele sai do fluxo e encosta na margem direita, formando a coluna alinhada que
os nomes, de comprimento variável, não formariam sozinhos. Centrado na
altura da linha, e não pendurado no topo dela: um índice que flutua na altura
das maiúsculas parece expoente, e não numeração. */
.menu a{position:relative;padding-right:clamp(38px,4.4vw,64px)}
.menu a .n{
position:absolute;right:0;top:50%;transform:translateY(-50%);
font-family:var(--ui);font-weight:400;
font-size:var(--t-label);letter-spacing:.18em;
color:var(--blush);
}
.menu a:hover{color:var(--blush)}
/* --- OS IDIOMAS, NO CABEÇALHO. -------------------------------------------
Eles moravam no pé do menu. Numa página que se apresenta em três línguas,
pôr a troca de idioma atrás de um gesto é esconder a mais óbvia das escolhas
— e quem chega em espanhol não abre um menu em inglês para procurar.
A TINTA É `currentColor`, e isso não é preguiça: o cabeçalho troca de tinta
conforme o campo que passa por baixo dele (`head--tinta-escura` desce a
página inteira para o vinho), e o `site.js` decide isso medindo. Escrever a
cor aqui seria criar uma segunda verdade que a medição não governa — foi o
erro que o instrumento cometeu no campo coral, e que custou creme sobre
coral a 3,23:1.
A SOMBRA É A MESMA DO ÍCONE DO MENU, pelo mesmo motivo: estes três rótulos
passam por cima de fotografia, e um rótulo de onze pixels sobre uma foto
clara desaparece sem ela. Ela inverte junto com a tinta. */
.head .lang{
display:flex;align-items:center;gap:clamp(12px,1.1vw,18px);
margin-left:auto;margin-right:clamp(18px,2.2vw,36px);
}
.head .lang button{
font-family:var(--ui);font-size:var(--t-label);font-weight:500;
letter-spacing:.14em;text-transform:uppercase;
color:currentColor;opacity:.72;
padding:6px 2px;
transition:opacity 300ms var(--ease);
/* A SOMBRA É A CONTRASTE, e não enfeite. Medido sobre o campo coral, creme a
52% dava 1,71:1 contra o fundo — o mesmo buraco em que o instrumento caiu
ali. A opacidade subiu para 72% e o halo ficou fechado e opaco: é ele que
cerca a letra, e é contra ele que o olho lê. */
text-shadow:0 1px 2px rgba(30,10,14,.95),0 0 7px rgba(30,10,14,.9),0 0 14px rgba(30,10,14,.55);
}
.head--tinta-escura .lang button{text-shadow:0 1px 2px rgba(244,231,215,.9),0 0 7px rgba(244,231,215,.85),0 0 14px rgba(244,231,215,.5)}
body.menu-open .lang button{text-shadow:none}
.head .lang button:hover{opacity:.82}
/* NO CELULAR OS TRÊS SÃO ALVO, e não enfeite: a barra é a única forma de trocar
de língua sem abrir menu. A 72% o rótulo apagado media 2,2:1 sobre a parte
clara do render — o halo segura o tipo, mas não a mancha. Subir a opacidade
é mais barato que engrossar o halo, que a essa altura já viraria caixa. */
@media (max-width:880px){
.head .lang button{opacity:.88}
}
.head .lang button[aria-pressed="true"]{opacity:1}
.head .lang button:focus-visible{outline:1px solid currentColor;outline-offset:3px}
/* O ALVO DO DEDO, como no ícone do menu: o desenho tem onze pixels de altura e
o dedo precisa de quarenta e quatro. Cresce por pseudo-elemento, que não
ocupa espaço nenhum na diagramação — senão os três rótulos se afastariam. */
.head .lang button{position:relative}
.head .lang button::before{
content:"";position:absolute;left:50%;top:50%;
width:clamp(34px,4vw,44px);height:44px;transform:translate(-50%,-50%);
}
@media (max-width:560px){
.menu a{font-size:clamp(28px,8.4vw,44px)}
}
/* ---------- 6. HERO ---------- */
/* A CAPA CENTRALIZA, e isso muda o que ela diz.
Ancorada embaixo, a manchete lia como legenda da fotografia: a imagem era o
assunto e o texto vinha depois dela, no rodapé. Centralizada, os dois passam
a ocupar o mesmo lugar na tela — a frase é o assunto e a fotografia é onde
ela acontece.
E o contraste foi CONFERIDO, não suposto: o véu do `::after` é mais fraco
justo no meio (.28 contra .72 no topo e .88 na base), então a primeira
suspeita era que a manchete perdesse legibilidade ao subir para lá. Medido a
1920x1080, com o texto escondido e só o fundo na conta: luminância média de
0.038 atrás da manchete, o que dá 9.5:1 contra o creme, e 5.6:1 mesmo nos 10%
mais claros da área. A fotografia é escura naquela faixa por conta própria, e
o véu fraco não chega a ser um problema. Se a fotografia da capa trocar por
uma mais clara no meio, esta conta precisa ser refeita. */
section.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-block:0}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(56,12,24,.72) 0%,rgba(56,12,24,.28) 38%,rgba(56,12,24,.88) 100%);
}
/* ---------- 6.1 O FILME DA CAPA ----------
Três clipes de cinco segundos, mudos, um puxando o outro e voltando ao
primeiro. Eles vivem ENTRE a fotografia e o véu vinho: o véu que já existia
continua por cima, então o tom avermelhado da capa é o mesmo de antes, e não
um tratamento novo em cima do vídeo.
O véu extra é por clipe, e foi MEDIDO, não escolhido. Com o degradê atual e
nada mais, o pior 5% dos pixels atrás da manchete dá 3,96:1 no clipe da
noite, 2,52:1 no da esquina e 2,78:1 no da fachada — os dois últimos abaixo
do 3:1 que o texto de cartaz precisa. Cada clipe ganhou então a menor dose de
vinho que devolve 3,6:1 no pior quadro: nada na noite, .22 na esquina, .17 na
fachada. No retrato do celular o recorte fecha em cima das lâminas iluminadas
e a conta muda, então ali as doses sobem para .28 e .30. Se trocarem um
clipe, esta conta precisa ser refeita — o script está em `_scripts`. */
.hero__filme{
position:absolute;inset:0;opacity:0;
/* a mesma pousada da fotografia, para que o filme não entre por outro caminho */
transform:scale(1.06);
transition:opacity 900ms var(--ease-rev), transform 2200ms var(--ease-rev);
}
.sec-in .hero__media .hero__filme{transform:scale(1)}
.hero__filme.is-ligado{opacity:1}
.hero__clipe{position:absolute;inset:0;opacity:0;transition:opacity var(--cruz,700ms) linear}
.hero__clipe.is-agora{opacity:1}
.hero__clipe video{display:block;width:100%;height:100%;object-fit:cover}
/* O véu de cada clipe mora DENTRO dele, e por isso ele entra e sai junto com o
clipe na mistura. Fosse uma camada só por cima, a dose do clipe que chega
apareceria no clipe que ainda está saindo. */
.hero__clipe::after{content:"";position:absolute;inset:0;background:rgba(56,12,24,var(--veu,0))}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(60px,9vh,120px)}
/* A LINHA DE CÓDIGO DA CAPA É A PRIMEIRA COISA QUE ALGUÉM LÊ NA PÁGINA, e lê
por cima de um filme. Ela ganha um degrau a mais que os outros rótulos e
perde entrelinha: `.30em` de espaçamento em caixa alta é assinatura, não
leitura, e sobre imagem em movimento a assinatura vira ruído. Com `.24em` as
palavras voltam a ser palavras. */
#capa .code{
font-size:clamp(12px,min(1.05vw,1.8svh),19px);
letter-spacing:.24em;
}
section.hero--short{min-height:100svh}
/* ---------- 6.2 A TELA DA POSIÇÃO ----------
O cliente pediu fundo mais forte aqui: "a marca é energia, esta tela está
entediante". Ela estava mesmo: campo laranja liso, três linhas de tipo no
alto, dois terços de nada embaixo.
O desenho é o que ele mesmo rabiscou: a frase quebra mais curta à esquerda e
um retângulo à direita traz um MOSAICO de cinco imagens. Chegamos aqui depois
de quatro tentativas que valem ficar registradas, porque cada uma ensinou o
que não fazer:
· grafismo desenhado sozinho — campo desenhado é textura, não é imagem;
· foto nítida sangrando na borda — bela composição, manchete espremida;
· foto desfocada com véu coral — o fundo sob o texto caía para 2,33:1;
· foto desfocada assada em campo escuro — funcionava, mas trocava a cor da
tela, e a cor coral é o batimento da página inteira.
O mosaico resolve as duas coisas ao mesmo tempo: o coral volta e a energia
vem das imagens, que é de onde ela deveria vir desde o começo.
AS CINCO IMAGENS SÃO CINCO MOMENTOS, e não cinco fotos do prédio: a rua de
Brickell ao anoitecer, o café no balcão de manhã, a porta do restaurante de
noite, a taça no bar, o batom no espelho. A frase diz que isto não é um
prédio com mais, é um jeito de tirar mais de Miami. Um mosaico do edifício
contradiria a frase; um mosaico do dia a prova.
O TIPO VIROU CHOC. `--ink` do campo coral era `#7A1E32`, o vinho médio, que
sobre coral dá 2,60:1 e nunca fechou o 3:1 que texto de cartaz pede. O
playbook usa `--o2-choc` (#2A1216) na sua própria tela coral, e ali são
4,47:1. Não é escolha de gosto: é o valor que já estava documentado, e ele
resolve a única coisa desta tela que estava tecnicamente errada. */
/* `34vw` E NÃO `34%`, e a diferença não é cosmética.
Enquanto o mosaico era absoluto na seção, aquele `34%` media contra a largura
da SEÇÃO, que é a janela inteira. Ao virar coluna de grade dentro do `.wrap`,
a mesma conta passou a medir contra a largura da COLUNA, que tem `max-width`
e respiro: numa tela de 2000 o mosaico caiu de 580 para 465 pixels, e as
peças ficaram visivelmente mais estreitas. `vw` devolve a referência original
e a proporção de antes, que é a que o cliente aprovou. */
.posicao{position:relative;overflow:hidden;--mos:clamp(250px,34vw,580px)}
/* O campo ganha direção de luz. `--bg2` do campo coral já existia nos tokens e
nunca tinha sido usado. Vai no `.campo` e não na seção porque quem pinta a
cor de uma seção aqui é o span que o `site.js` injeta, e a própria seção é
`background:transparent`. */
.posicao .campo{
background-image:radial-gradient(152% 128% at 8% 2%,
#EE7152 0%,#E06044 36%,var(--coral) 74%,#CD5237 92%,var(--bg2) 100%);
}
/* A FRASE E O MOSAICO SÃO DUAS COLUNAS DA MESMA CAIXA, e não duas coisas
posicionadas cada uma por conta.
Antes o mosaico era absoluto na seção, centrado com `top:50%`, e a frase
vivia no `.wrap`. Em teoria os dois centros coincidem; na prática coincidem
só enquanto a seção mede exatamente uma janela, e basta a seção crescer um
fio — um pin recalculado, uma barra de navegador, um nível de zoom — para os
dois passarem a se referir a alturas diferentes. Foi o que apareceu na tela
do cliente: as imagens descendo em relação ao texto.
Numa grade de duas colunas com `align-items:center` esse desacordo deixa de
ser possível: os dois são centrados pela MESMA caixa, e quem garante é o
navegador. De quebra somem três remendos — a reserva de `padding-right` para
o mosaico não passar por baixo da frase, o `right` calculado para achar a
borda da coluna em telas largas, e o `translateY(-50%)`. */
.posicao .wrap{
position:relative;z-index:3;
display:grid;grid-template-columns:minmax(0,1fr) var(--mos);
column-gap:clamp(28px,3vw,72px);align-items:center;
}
/* A QUEBRA DA FRASE É ESCRITA, NÃO SORTEADA.
O cliente aprovou a frase em quatro linhas, quebrando depois de "not", de
"more." e de "get". Quebra assim não se pede à largura: se pede ao texto. As
quatro linhas estão nos `
` do HTML e dos dois dicionários, e cada língua
tem a sua — em português a terceira linha é a mais longa, em inglês é a
segunda.
`max-width` sai daqui. A `.cartaz--m` limita a 22ch, e 22ch é uma medida que
depende do corpo do tipo: com a quebra escrita, esse limite só criaria um
segundo lugar decidindo onde a linha termina, e os dois discordariam.
A classe `frase-presa` é posta pelo `lp.js`, nunca pelo HTML. Ela é que
proíbe a quebra automática, e proibir sem alguém garantindo que o texto cabe
é como arrancar o freio: sem script, a frase volta a quebrar sozinha, que é
feio mas é legível. Com script, o bloco 8 do `lp.js` mede e encolhe. */
.posicao h2{max-width:none}
.posicao h2.frase-presa{white-space:nowrap}
/* O MOSAICO.
Cinco imagens em duas colunas e três fileiras, com uma delas ocupando duas
fileiras. A que se estica é a da rua, porque é a única panorâmica de cidade
do jogo e é ela que ancora o retângulo; as outras quatro são cenas de perto e
funcionam pequenas.
A altura é `min` de duas medidas. Numa tela alta manda a fração da janela;
numa tela baixa manda o teto em pixels, senão o mosaico cresce junto com a
janela e empurra a manchete para fora da seção. É a mesma regra da rampa de
tipo do projeto: o menor entre uma medida de tela e um limite. */
.posicao__mosaico{
position:relative;z-index:2;
height:min(74svh,700px);
/* `minmax(0, …fr)` E NÃO `…fr` SECO, e isto não é preciosismo de sintaxe.
Um `1fr` é `minmax(auto, 1fr)`, e esse `auto` quer dizer "nunca menor que o
conteúdo". O conteúdo aqui é uma imagem cujo tamanho intrínseco passa de
setecentos pixels de altura, então as fileiras se recusavam a encolher e as
peças vazavam para fora da caixa de 320 pixels do empilhado — medido: uma
célula de 766px dentro de um mosaico de 320. Com o mínimo em zero, quem
manda é a fração, que é o que se quis dizer desde o começo. O `min-height`
nas células é a mesma conversa, um nível abaixo. */
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:minmax(0,1.18fr) minmax(0,.92fr) minmax(0,1.04fr);
gap:clamp(5px,.55vw,9px);
}
/* SEM `overflow:hidden` E SEM FUNDO, e as duas coisas pelo mesmo motivo.
Enquanto o desfoque morava na imagem DENTRO de uma célula que recortava, a
parte macia do borrão batia na borda do recorte e era cortada a prumo: a peça
voava desfocada por dentro e com quatro arestas afiadas por fora, que é
exatamente o contrário do que desfoque quer dizer. O texto desta mesma tela,
que o `cena.js` desfoca, não tem esse problema porque nada o recorta.
Agora o desfoque é da CÉLULA, e ela não recorta nada: `object-fit:cover` já
faz o corte dentro da caixa da imagem, então não há o que transbordar. O
fundo da célula saiu junto — desfocado, ele viraria uma auréola escura em
volta da foto, e a foto tem que diluir no coral, não numa moldura. */
.posicao__mosaico figure{position:relative;min-width:0;min-height:0}
.posicao__mosaico img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- O VOO DAS IMAGENS ----------------------------------------------------
As cinco entram de fora da tela e pousam na grade. A máscara é a própria
seção: ela é `overflow:hidden`, então enquanto o ladrilho está lá fora ele
simplesmente não existe, e o campo coral é tudo o que se vê. Não há máscara
nova para manter — é o recorte que a seção já tinha.
A DIREÇÃO DE CADA UM É A DO LUGAR ONDE ELE VAI PARAR, e essa é a única regra
aqui. Os da coluna esquerda vêm de cima e de baixo, o de cima puxado mais
para a esquerda; os da direita entram pela borda direita, o de cima um pouco
mais alto e o de baixo um pouco mais baixo. Quem vem da direção certa parece
estar chegando; quem vem de qualquer direção parece estar sendo jogado.
Três coisas acontecem no mesmo gesto, e nenhuma delas sozinha:
· a POSIÇÃO, que é o gesto principal;
· a ESCALA, que começa em 1,25 e cai para 1 — é o que faz parecer que a peça
está caindo em direção à página em vez de deslizando sobre ela;
· o DESFOQUE, que começa em 12px e some. Foco é a coisa que o olho usa para
saber a que distância uma coisa está: sem ele a escala vira zoom, com ele
vira profundidade. O desfoque acaba ANTES do movimento, porque uma peça
ainda borrada parada no lugar parece defeito.
A rotação subiu duas vezes a pedido do cliente: de quatro graus para doze, e
de doze para vinte e um a vinte e sete. Com quatro a peça parecia apenas mal
encaixada. Com doze ela já girava, mas discretamente demais para alguém
reparar. Com vinte e cinco a rotação vira parte do gesto: a peça chega de
lado e se endireita, e a última coisa que ela faz antes de pousar é ficar
reta. Foi preciso conferir de novo as posições de partida depois de subir:
caixa girada é caixa mais larga, e ninguém pode começar já dentro da tela.
`filter` termina em `none` e não em `blur(0)`: zero de desfoque ainda é um
filtro ativo, e um filtro ativo é uma camada de composição que o navegador
segura para sempre depois que a animação acabou. Pela mesma razão não há
`will-change` aqui: uma transição de `transform` já promove o elemento
sozinha enquanto dura, e um `will-change` escrito na folha são cinco camadas
penduradas para o resto da visita por causa de um voo de um segundo e meio. */
/* `translate`, `rotate` E `scale` SEPARADOS, e não um `transform` só.
Um `transform` é uma propriedade única: as três coisas dentro dele são
obrigadas a compartilhar a mesma curva e o mesmo tempo. Só que elas não
contam a mesma história. O deslocamento é o gesto e vai do começo ao fim; o
GIRO é o que faz a peça parecer estar chegando, e por isso ele precisa
SEGURAR e endireitar só no último trecho, junto com o desfoque. Com as três
propriedades separadas cada uma anda no tempo dela, e o CSS moderno as compõe
na ordem translate, rotate, scale, que é exatamente a que estava escrita à
mão antes.
O giro e o desfoque compartilham o mesmo atraso de propósito: a peça chega
torta e borrada, e as duas coisas se resolvem no instante em que ela pousa. */
.posicao__mosaico figure{
translate:var(--tx,0) var(--ty,0);
rotate:var(--rot,0deg);
scale:var(--sc,1);
filter:blur(var(--desfoque));
transition:translate 1500ms cubic-bezier(.16,.74,.22,1) var(--cd,0ms),
scale 1500ms cubic-bezier(.16,.74,.22,1) var(--cd,0ms),
rotate 1080ms cubic-bezier(.3,.7,.3,1) calc(var(--cd,0ms) + 420ms),
filter 1080ms cubic-bezier(.3,.7,.3,1) calc(var(--cd,0ms) + 420ms);
}
/* O DESFOQUE MORA NUMA VARIÁVEL SÓ, porque ele é lido em dois lugares — o modo
tempo aqui e o modo rolagem lá embaixo — e um número escrito duas vezes é um
número que vai ficar diferente de si mesmo na próxima vez que alguém mexer.
Ele é aplicado na CÉLULA e não na imagem. Na imagem, dentro de uma célula que
recortava, a parte macia do borrão morria na borda do recorte: a peça voava
desfocada por dentro e afiada por fora. Na célula, com o recorte fora do
caminho, o borrão se espalha para todos os lados e a peça se dilui no coral —
que é como o texto desfocado desta mesma tela se comporta, e era esse o
parâmetro. */
.posicao__mosaico{--desfoque:48px}
section.sec-in .posicao__mosaico figure{translate:none;rotate:none;scale:none;filter:none}
/* A geometria de cada peça mora aqui e só aqui. `--cd` é a cascata em
milissegundos, para o modo tempo; `--s` é a mesma cascata em fração da
entrada, para o modo rolagem. */
.posicao__mosaico figure:nth-child(1){--tx:-14vw;--ty:-98svh;--rot:-24deg;--sc:1.28;--cd:0ms;--s:0}
.posicao__mosaico figure:nth-child(2){--tx:78vw;--ty:-24svh;--rot:22deg;--sc:1.24;--cd:150ms;--s:.10}
.posicao__mosaico figure:nth-child(3){--tx:84vw;--ty:0px;--rot:27deg;--sc:1.26;--cd:300ms;--s:.20}
.posicao__mosaico figure:nth-child(4){--tx:-9vw;--ty:96svh;--rot:21deg;--sc:1.30;--cd:220ms;--s:.15}
.posicao__mosaico figure:nth-child(5){--tx:76vw;--ty:26svh;--rot:-25deg;--sc:1.22;--cd:430ms;--s:.28}
/* ---- O MESMO VOO, MAS PUXADO PELA ROLAGEM ---------------------------------
O cliente pediu que o voo aconteça JUNTO COM O SCROLL, e nesta página isso
já tem um dono: o `cena.js` prende cada seção e forma o conteúdo dela em
função do quanto a pessoa rolou. Então o voo entra nessa mesma linha do
tempo em vez de inventar uma segunda.
A cena escreve UMA variável, `--voo`, de 0 a 1. É tudo o que ela sabe sobre
o mosaico. A geometria — direção, rotação, escala, desfoque, cascata — fica
aqui, e é a mesma do modo tempo, lida das mesmas custom properties. Uma
metade sabe quando; a outra sabe onde; nenhuma das duas precisa saber as
duas coisas.
`--a` é o avanço desta peça: a fração de `--voo` que já passou do começo
dela, recortada entre 0 e 1. `--f` é o que falta, e é por ele que a
distância, o ângulo e a sobra de escala são multiplicados. O desfoque SEGURA E SÓ
DEPOIS SOLTA: `--ab` ignora os primeiros 30% do voo da peça e gasta os outros
70% limpando. Antes ele corria na frente do movimento e a peça chegava nítida
a um terço do caminho, voando afiada o resto do trajeto — que foi o que o
cliente viu. A regra que eu estava seguindo, "peça borrada parada no lugar
parece defeito", continua valendo: por isso o desfoque termina no instante em
que o movimento termina, e não depois. Terminar antes nunca foi parte dela.
Quem decide qual dos dois modos vale é a classe `voo-na-cena`, que o
`cena.js` põe na seção só quando ela PRENDE — ou seja, no desktop. Sem ela
vale o modo tempo acima: é o que roda no celular, onde a seção não prende e a
linha do tempo dela cabe em pouco mais de duzentos pixels de rolagem, e é
também o que roda quando o GSAP não carrega. */
html.com-cena .posicao.voo-na-cena .posicao__mosaico figure{
--a:clamp(0,calc((var(--voo,1) - var(--s,0)) / var(--dur,.62)),1);
--f:calc(1 - var(--a));
--ab:clamp(0,calc((var(--a) - .30) / .70),1);
translate:calc(var(--tx,0px) * var(--f)) calc(var(--ty,0px) * var(--f));
/* o giro segue `--ab` e não `--f`: ele acompanha o desfoque, segura enquanto a
peça viaja e só se endireita no fim. Seguindo `--f` ele já estaria quase
reto na metade do caminho, que foi o que o cliente viu como "discreto". */
rotate:calc(var(--rot,0deg) * (1 - var(--ab,1)));
scale:calc(1 + (var(--sc,1) - 1) * var(--f));
filter:blur(calc(var(--desfoque) * (1 - var(--ab,1))));
transition:none;
}
/* Passada a seção, o desfoque some de vez em vez de ficar em `blur(0px)`: zero
de desfoque ainda é um filtro ativo, e filtro ativo é camada de composição
que o navegador segura. `cena-viva` é a própria cena dizendo se esta seção
ainda é a que está no ar. */
html.com-cena section.posicao.voo-na-cena:not(.cena-viva) .posicao__mosaico figure{filter:none}
.posicao__mosaico figure:nth-child(1){grid-column:1;grid-row:1 / 3}
.posicao__mosaico figure:nth-child(2){grid-column:2;grid-row:1}
.posicao__mosaico figure:nth-child(3){grid-column:2;grid-row:2}
.posicao__mosaico figure:nth-child(4){grid-column:1;grid-row:3}
.posicao__mosaico figure:nth-child(5){grid-column:2;grid-row:3}
/* os enquadramentos: cada corte foi escolhido olhando, não pelo centro */
.posicao__mosaico figure:nth-child(2) img{object-position:62% 50%}
.posicao__mosaico figure:nth-child(3) img{object-position:54% 46%}
.posicao__mosaico figure:nth-child(4) img{object-position:44% 42%}
.posicao__mosaico figure:nth-child(5) img{object-position:56% 40%}
/* QUANDO A COMPOSIÇÃO DEIXA DE CABER, o mosaico desce para baixo da frase e
ocupa a largura inteira. A manchete fica em cima, sobre coral limpo.
A condição não é só largura: é largura OU retrato. Num tablet em pé, 900 por
1200, a largura passa de 880 e a regra de duas colunas valia — o mosaico
virava uma tira de 300px e a manchete um bloco espremido do lado. Duas
colunas lado a lado só fazem sentido numa janela deitada. */
@media (max-width:880px), (max-width:1180px) and (orientation:portrait){
/* uma coluna só, e o mosaico vira a segunda LINHA: a frase em cima, sobre
coral limpo, e as imagens no pé. Quem separa os dois é o `row-gap` da
mesma grade, não mais um `padding-bottom` calculado à mão para reservar a
altura de um bloco absoluto. */
.posicao .wrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,5svh,60px)}
.posicao__mosaico{
height:min(40svh,320px);
grid-template-rows:minmax(0,1fr) minmax(0,1fr);
}
.posicao__mosaico figure:nth-child(1){grid-column:1;grid-row:1 / 3}
.posicao__mosaico figure:nth-child(2){grid-column:2;grid-row:1}
.posicao__mosaico figure:nth-child(3){grid-column:2;grid-row:2}
.posicao__mosaico figure:nth-child(4),
.posicao__mosaico figure:nth-child(5){display:none}
/* Empilhado, o mosaico mora no pé da tela, e o ladrilho alto medido com a
escala de partida passa de quatrocentos pixels: a `-98svh` do desenho largo
deixava a barra de baixo dele aparecendo no alto da tela antes da hora.
Aqui a distância é maior, e a regra segue sendo a mesma: ninguém começa
dentro da máscara. */
.posicao__mosaico figure:nth-child(1){--ty:-138svh}
}
/* quem pediu menos movimento recebe o mosaico posto, sem voo */
@media (prefers-reduced-motion:reduce){
.posicao__mosaico figure{translate:none;rotate:none;scale:none;filter:none;transition:none}
}
/* ---------- 6.3 A TELA DA LOCALIZAÇÃO ----------
Texto do cliente, para abrir a seção do mapa. Cento e quarenta palavras numa
página cujas outras telas de texto carregam de quinze a vinte e cinco, então
a tela é desenhada PARA esse tamanho em vez de tentar escondê-lo.
DUAS COLUNAS, DUAS VOZES. À esquerda ficam as duas frases que o cliente
mandou em negrito, a de abertura e a de fecho — que são a mesma ideia dita
duas vezes, e é justamente o vazio entre elas que faz a segunda soar como
conclusão da primeira. À direita fica o caminho de uma à outra, em corpo de
leitura: o ritmo do dia, a virada, o que é Brickell, o que a casa faz com
isso.
A coluna da direita é a MAIOR das duas (`cols--sidebar` dá 1 para 1,15), o
contrário do que a hierarquia sugeriria. É de propósito: a voz alta não
precisa de espaço, precisa de silêncio em volta; a voz baixa precisa de
medida para ser lida. */
/* Três itens, e a colocação é escrita à mão: a voz alta em cima à esquerda, o
texto de leitura ocupando as duas fileiras da direita, e o fecho no pé da
esquerda. A fileira de baixo é `1fr` para receber toda a sobra de altura, e
é ela que empurra o fecho para o pé — o vazio entre as duas frases é o que
faz a segunda soar como conclusão da primeira. */
.cidade__ato--voz{column-gap:clamp(32px,5vw,110px);grid-template-rows:auto 1fr;align-items:stretch}
.miami__voz{grid-column:1;grid-row:1}
.miami__corpo{grid-column:2;grid-row:1 / 3}
.miami__fecho{grid-column:1;grid-row:2;align-self:end;margin-top:clamp(30px,4.4svh,64px)}
/* a voz baixa centra na altura da voz alta. As duas colunas se esticam à mesma
altura e o texto de leitura fica no meio dela: assim o bloco da direita não
fica pendurado no alto com um vazio embaixo, e a linha de cima dele cai perto
da manchete, que é onde o olho está quando chega aqui */
.miami__corpo{display:flex;flex-direction:column;justify-content:center}
/* o corpo não precisa dos 64ch da regra geral: numa coluna de duas, a medida
que a coluna já dá é mais curta do que isso, e travar em 64 só criaria uma
segunda régua discordando da primeira */
.miami__corpo .body{max-width:none}
.miami__corpo .lede{max-width:none}
/* Tela estreita: uma coluna só, na ordem em que se lê. O fecho perde o
`margin-top:auto` — empurrar para o pé de uma caixa que agora tem a altura do
próprio conteúdo não empurra para lugar nenhum — e ganha um respiro escrito. */
@media (max-width:880px), (max-width:1180px) and (orientation:portrait){
.cidade__ato--voz{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
row-gap:clamp(26px,4svh,52px);align-items:start}
/* cai tudo na ordem em que se lê: voz, texto, fecho */
.miami__voz,.miami__corpo,.miami__fecho{grid-column:auto;grid-row:auto}
.miami__corpo{display:block}
.miami__fecho{align-self:auto;margin-top:0}
}
/* ---------- 7. COMPONENTES ---------- */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.btn{
display:inline-flex;align-items:center;gap:12px;
font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
padding:15px 26px;border:1px solid currentColor;border-radius:999px;
transition:background 300ms var(--ease),color 300ms var(--ease);
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.link{
font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
border-bottom:1px solid var(--line);padding-bottom:5px;display:inline-block;
transition:border-color 260ms var(--ease)
}
.link:hover{border-bottom-color:currentColor}
/* lista numerada, densidade larga */
.items{border-top:1px solid var(--line)}
.items > li{
list-style:none;border-bottom:1px solid var(--line);
padding-block:clamp(20px,2.4vw,34px);
display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(14px,2vw,34px);align-items:baseline;
}
.items .n{font-size:var(--t-label);letter-spacing:.16em;color:var(--accent)}
.items p{color:var(--mute);margin-top:8px;max-width:62ch}
/* variante estreita: número, título e texto na mesma linha. É ela que segura a
regra de uma seção por tela quando a lista tem cinco itens ou mais. */
.items--tight > li{grid-template-columns:52px minmax(190px,250px) minmax(0,1fr);padding-block:clamp(14px,1.7vw,24px)}
.items--tight > li > div{display:contents}
.items--tight p{margin-top:0}
/* lista numerada, densidade estreita */
.ticks{border-top:1px solid var(--line)}
.ticks > li{
list-style:none;border-bottom:1px solid var(--line);
padding-block:14px;display:flex;gap:18px;align-items:baseline;justify-content:space-between;
}
.ticks .t{font-family:var(--display);font-weight:200;font-size:var(--d4)}
.ticks .v{font-size:var(--t-small);letter-spacing:.10em;color:var(--mute);white-space:nowrap}
.card{border:1px solid var(--line);padding:clamp(22px,2.6vw,38px);height:100%}
.card .label{margin-bottom:14px}
.card p{color:var(--mute);margin-top:10px}
/* FIGURA
A medida vai na imagem, nunca na figura, senão a legenda embaixo é cortada.
Sem recorte na figura, então também sem crescer no hover: o ganho não paga o
risco de a imagem vazar por cima do texto. */
.figure{position:relative}
.figure img{width:100%;object-fit:cover;display:block}
.figure--tall img{aspect-ratio:3/4;max-height:64svh}
.figure--wide img{aspect-ratio:16/9}
.figure--square img{aspect-ratio:1/1}
.figure--edit img{height:clamp(300px,56svh,540px)}
.figure--port{width:min(100%,520px);margin-inline:auto}
.figure--port img{aspect-ratio:4/5;max-height:62svh}
.figure figcaption{margin-top:12px;display:block}
/* Numa fileira larga as quatro escolhas ficam na mesma linha; numa estreita a
quebra continua sendo o certo, e por isso o `wrap` fica. Quem decide é a
largura disponível, não uma regra escrita. */
/* As duas perguntas empilhadas precisam do mesmo respiro que tinham quando
eram filhas diretas do formulário: o `stack-m` do `