/* ------------------------------------------------------------------
Arco, folha de estilo do site
Paleta e geometria amostradas da comunicacao grafica oficial
(ARCO-SAR-CALENDARIO-PARA_APROVACAO.pdf):
fundo #FEFBE8 tinta #1D1D1B faixa da curva #F7F5E4
A curva do Arco entra como faixa larga clara no canto, do jeito
que ela aparece na peca, nao como filete.
Tipografia: PP Migra (Extralight, Regular e Italic) no display,
Arial no texto, Arial Narrow nos numeros. Para trocar qualquer uma,
mexa no @font-face aqui embaixo e nas variaveis --font-display,
--font-texto e --font-numero. Nada mais no site precisa mudar.
------------------------------------------------------------------ */
/* PP Migra, display da casa. Usados apenas Extralight, Regular e Italic.
Servidos em OTF; para reduzir peso, converta para woff2 (veja LEIA-ME.md). */
@font-face {
font-family: "PP Migra";
src: url("../fontes/PPMigra-Extralight.otf") format("opentype");
font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
font-family: "PP Migra";
src: url("../fontes/PPMigra-Regular.otf") format("opentype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "PP Migra";
src: url("../fontes/PPMigra-Italic.otf") format("opentype");
font-weight: 400; font-style: italic; font-display: swap;
}
:root {
--bg: #fefbe8;
--ink: #1d1d1b;
--muted: #7a7870;
--cinza: #a9a79c;
--line: #1d1d1b;
--line-fina: #cfccb8;
--curva: #f7f5e4;
--font-display: "PP Migra", Georgia, "Times New Roman", serif;
--font-texto: Arial, "Helvetica Neue", Helvetica, sans-serif;
--font-numero: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
--largura: 900px;
--gutter: 26px;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-texto);
font-size: 16px; line-height: 1.6;
color: var(--ink); background: var(--bg);
margin: 0; padding: 0;
}
/* A curva do Arco, faixa larga nos cantos ------------------------- */
/* Marca d'agua: UM arco, sempre o mesmo, sempre inteiro. Tamanho e
posicao saem todos de vmax, a mesma medida, entao o arco cresce e
diminui por completo junto com a tela, sem mudar de recorte, sem
girar e sem se encontrar com uma segunda copia. Nao ha versao
diferente por tamanho de tela: a forma e uma so. */
.wm { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wm svg { position: absolute; display: block;
width: 132vmax; height: 132vmax; top: -41vmax; right: -46vmax; }
.wm path { fill: none; stroke: var(--curva); stroke-width: 26; }
.pagina { position: relative; z-index: 1; max-width: var(--largura);
margin: 0 auto; padding: 0 var(--gutter); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, .porta-titulo, .habitante-nome, .expo-titulo {
font-family: var(--font-display); font-weight: 400;
}
.kicker, .rotulo, label, button, .botao, .dia, .hora, .porta-num, .habitante-area {
font-family: var(--font-texto);
}
.kicker {
font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em;
text-transform: uppercase; color: var(--ink); margin: 0 0 4px;
}
.rotulo {
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink); font-weight: 700; margin: 0 0 6px;
}
h1 { font-weight: 200; font-size: 58px; line-height: 1.02; letter-spacing: -0.005em; margin: 0 0 18px; }
h2 { font-weight: 200; font-size: 30px; line-height: 1.1; margin: 52px 0 14px; }
h3 { font-size: 19px; line-height: 1.25; margin: 26px 0 6px; }
p { margin: 0 0 14px; }
.lead { font-size: 19px; line-height: 1.55; max-width: 34em; }
.muted { color: var(--muted); }
.pequeno { font-size: 14px; }
/* Cabecalho -------------------------------------------------------- */
.topo { display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; padding: 40px 0 0; flex-wrap: wrap; }
.marca { display: block; height: 66px; width: auto; }
.topo-dados { font-size: 11px; letter-spacing: 0.16em; line-height: 1.9;
color: var(--ink); text-transform: none; padding-top: 12px; }
.topo-dados p { margin: 0; }
.voltar { display: inline-block; margin: 34px 0 0; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
text-decoration: none; border-bottom: 1px solid var(--ink);
padding-bottom: 3px; }
/* Navegacao ------------------------------------------------------- */
.menu { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 22px 0 0;
padding: 12px 0; border-top: 1px solid var(--line-fina);
border-bottom: 1px solid var(--line-fina);
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.menu a { text-decoration: none; padding-bottom: 2px;
border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--ink); }
.menu [aria-current="page"] { color: var(--muted); }
/* Capa da home ----------------------------------------------------- */
.capa { padding: 30px 0 0; }
.capa .marca { height: 112px; margin-left: -8px; }
.capa .lead { margin: 30px 0 0; }
/* As portas: os textos clicaveis da primeira pagina ---------------- */
.portas { margin: 54px 0 0; border-top: 1px solid var(--line); }
.porta {
display: block; text-decoration: none; color: var(--ink);
padding: 26px 0; border-bottom: 1px solid var(--line);
}
.porta:last-child { border-bottom: none; }
.porta-titulo { display: block; font-weight: 200; font-size: 44px; line-height: 1.05; }
.porta-desc { display: block; font-size: 15px; color: var(--muted);
margin: 8px 0 0; max-width: 40em; }
.porta:hover .porta-titulo { font-style: italic; }
/* o filete fecha a lista, colado no ultimo card, como os outros blocos do site */
.portas { border-bottom: 1px solid var(--line); }
/* Blocos de conteudo ----------------------------------------------- */
section { margin: 0 0 6px; }
.eixos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
margin: 20px 0 6px; }
.eixos-so-nome { margin-top: 52px; text-align: center; }
.eixos-so-nome p { font-family: var(--font-display); font-size: 32px; line-height: 1.15;
font-weight: 400; font-style: italic; color: var(--ink); margin: 0; }
.frase { font-family: var(--font-display); font-size: 25px; line-height: 1.25;
font-weight: 200; margin: 16px 0 26px; max-width: 26em; }
.eixo p { font-size: 15px; margin: 0; color: var(--muted); }
.eixo .rotulo { color: var(--ink); }
.frentes { list-style: none; margin: 16px 0 0; padding: 0; }
.frentes li { padding: 14px 0; border-top: 1px solid var(--line-fina); font-size: 16px; }
.frentes li:last-child { border-bottom: 1px solid var(--line-fina); }
.frentes strong { font-weight: 700; }
/* Grade da programacao, no desenho da peca impressa ---------------- */
.grade { margin: 24px 0 0; border: 1px solid var(--line); }
.linha { display: grid; grid-template-columns: 168px 1fr; align-items: stretch;
border-bottom: 1px solid var(--line); }
.linha:last-child { border-bottom: none; }
.dia { font-family: var(--font-numero); font-size: 46px; line-height: 0.98;
color: var(--cinza); padding: 24px 14px 24px 16px;
border-right: 1px solid var(--line);
display: flex; flex-direction: column; align-items: flex-start;
justify-content: center; }
.dia-mes { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--cinza); margin-top: 6px; }
.evento { padding: 24px 22px; }
.evento p { margin: 0 0 6px; }
.evento p:last-child { margin: 0; }
.evento-titulo { font-family: var(--font-display); font-size: 21px; line-height: 1.2; }
.evento-quem { font-size: 15px; color: var(--muted); }
.hora { font-size: 13px; letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; }
.evento .seta { color: var(--ink); }
/* Atividade clicavel e o cartao que ela abre ---------------------- */
.aviso-clique { font-family: var(--font-display); font-style: italic; font-size: 18px;
color: var(--ink); margin: 16px 0 0; }
.aviso-clique::before { content: "↓"; font-family: var(--font-texto); font-style: normal;
color: var(--cinza); margin-right: 9px; }
.evento-abrir { display: block; text-decoration: none; color: var(--ink); }
.evento-abrir:hover .evento-titulo { text-decoration: underline;
text-underline-offset: 4px; }
.evento-abrir .evento-titulo,
.evento-abrir .evento-quem,
.evento-abrir .hora { display: block; }
.evento-abrir .evento-quem { margin-top: 6px; }
.linha { cursor: pointer; }
/* Sem JavaScript o detalhe abre embaixo da atividade, pelo :target */
.detalhe { margin: 18px 0 2px; padding-top: 16px;
border-top: 1px solid var(--line-fina); }
.detalhe[hidden] { display: none; }
:root:not(.com-cartao) .linha:target .detalhe[hidden] { display: block; }
.detalhe-titulo { font-family: var(--font-display); font-size: 24px;
line-height: 1.15; margin: 0 0 4px; }
.detalhe .botao { margin-top: 18px; }
.modal { position: fixed; inset: 0; z-index: 40; display: flex;
align-items: center; justify-content: center; padding: 24px;
background: rgba(29, 29, 27, .55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-cartao { position: relative; width: 100%; max-width: 720px;
max-height: 86vh; overflow-y: auto;
background: var(--bg); border: 1px solid var(--line);
padding: 42px 44px 36px; }
.modal-cartao:focus { outline: none; }
.modal-cartao .detalhe-titulo { font-size: 31px; line-height: 1.12;
margin: 0 0 4px; padding-right: 34px; }
.modal-cartao .faixa { grid-template-columns: 1fr 1fr; gap: 20px 34px;
margin: 22px 0 26px; padding: 20px 0; }
.modal-cartao .eixos { gap: 28px; margin-top: 22px; }
.modal-cartao p { max-width: none; }
.modal-cartao .detalhe { border-top: none; padding-top: 0; margin: 0; }
/* O cartao de obra e mais largo que o de atividade, porque o conteudo
principal dele e a imagem e nao o texto. */
.modal-obra { max-width: 880px; }
.modal-obra .obra-grande { display: block; width: auto; height: auto;
max-width: 100%; max-height: 68vh; margin: 0 auto 22px;
background: var(--curva); }
/* Obra de mais de uma peca: as pecas ficam no palco, na posicao que o
Bill alinhou olhando as duas, e nao empilhadas por acaso. Tudo em
porcentagem do palco, entao o arranjo vale igual no computador e no
celular, sem refazer. Os valores vem no style de cada peca; os daqui
sao a reserva, para uma peca sem posicao nao sumir do palco.
O max-width amarra a ALTURA: e a altura maxima vezes a proporcao, que
e o jeito de limitar altura sem desmentir o aspect-ratio. */
.obra-palco { --palco: 1.2; position: relative; width: 100%;
max-width: calc(64vh * var(--palco));
aspect-ratio: var(--palco); margin: 0 auto 22px; }
.obra-palco .obra-grande { --x: 0%; --y: 0%; --w: 56%;
position: absolute; left: var(--x); top: var(--y);
width: var(--w); height: auto;
max-width: none; max-height: none; margin: 0; }
.modal-obra .detalhe-titulo { text-align: center; }
.modal-fechar { position: absolute; top: 12px; right: 14px;
font-family: var(--font-texto); font-size: 26px; line-height: 1;
color: var(--ink); background: none; border: none;
padding: 4px 8px; cursor: pointer; }
.modal-fechar:hover { color: var(--muted); }
/* Passar de uma atividade para a seguinte sem fechar o cartao. Sao links
de ancora de verdade: o hashchange reabre o cartao na atividade certa,
e no modo sem JavaScript continuam levando a pessoa ao lugar certo. */
.modal-passo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
margin: 30px 0 0; padding: 20px 0 0;
border-top: 1px solid var(--line-fina); }
.passo { display: block; color: var(--ink); text-decoration: none; }
.passo-depois { grid-column: 2; text-align: right; }
.passo-quando { display: block; font-family: var(--font-numero);
font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted); margin-bottom: 5px; }
/* sem corte: um titulo truncado no meio da palavra fica pior do que um
titulo em tres linhas, e dois dos seis sao longos */
.passo-titulo { display: block;
font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.passo:hover .passo-quando { color: var(--ink); }
.passo:hover .passo-titulo { text-decoration: underline; text-underline-offset: 4px; }
.passo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.travado { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
.modal-entrando { animation: modal-fundo 200ms ease-out; }
.modal-entrando .modal-cartao { animation: modal-cartao 250ms ease-out; }
}
@keyframes modal-fundo { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-cartao {
from { opacity: 0; transform: translateY(12px) }
to { opacity: 1; transform: translateY(0) }
}
/* Exposicao -------------------------------------------------------- */
/* Faixa larga, como na diagramacao do texto curatorial: o titulo ocupa a
largura toda e o corpo vem embaixo. O tamanho acompanha a tela para a
linha continuar cheia em qualquer largura. */
.expo-titulo { font-weight: 200; line-height: 1.02; letter-spacing: -0.005em;
margin: 6px 0 16px;
/* O titulo ocupa a largura inteira numa linha so. O 15.52 e a largura
desta frase em ems, medida na PP Migra Extralight com o
letter-spacing acima: largura da coluna dividida por ele da o corpo
que preenche a linha. Mudou o titulo ou a fonte, meca de novo. O piso
de 26px segura a legibilidade no celular, onde ele volta a quebrar. */
font-size: max(26px, calc((min(var(--largura), 100vw) - var(--gutter) * 2) / 15.52));
}
/* Habitantes ------------------------------------------------------- */
.habitante { padding: 28px 0; border-top: 1px solid var(--line-fina); }
.habitante:last-of-type { border-bottom: 1px solid var(--line-fina); }
.habitante-topo { display: flex; align-items: baseline; gap: 14px;
flex-wrap: wrap; margin: 0 0 12px; }
.habitante-nome { font-size: 30px; font-style: italic; }
.habitante-area { font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.habitante-corpo { display: grid; grid-template-columns: 260px 1fr; gap: 26px;
align-items: start; }
.habitante-corpo p { margin: 0 0 10px; font-size: 16px; }
.trabalho { display: block; width: 100%; height: auto;
background: var(--curva); }
.trabalho-vazio { aspect-ratio: 4 / 5; border: 1px solid var(--line-fina); }
.trabalho-vazio { display: flex; align-items: center; justify-content: center;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--cinza); text-align: center; padding: 10px; }
/* Catalogo de obras ------------------------------------------------ */
/* A grade e de imagem, nao de texto, por isso nao reusa a .eixos: o gap
vertical e maior que o horizontal, para a legenda de uma obra respirar
antes da foto de baixo. O 24px do gap horizontal e o mesmo da .eixos,
para as duas grades parecerem da mesma familia. */
/* Linhas justificadas, nao grade fixa. Cada obra entra com a largura que
a propria proporcao pede, e a linha fecha na largura da pagina: e o
arranjo de folha de contato, o unico que respeita obras que vao de
180x160 a 150x60 sem cortar nem emoldurar nenhuma.
A conta: flex-basis proporcional a razao da obra, e flex-grow na mesma
razao. Quando todas de uma linha crescem pelo mesmo fator, as alturas
das imagens saem iguais sozinhas, sem JavaScript e sem medir nada.
O --r de cada obra e largura dividida por altura, escrito no HTML. */
.obras { list-style: none; display: flex; flex-wrap: wrap;
gap: 32px 22px; margin: 26px 0 0; padding: 0; align-items: flex-start; }
/* o --r de cada obra vem no style do . O 1 aqui e a reserva: obra
sem razao declarada entra quadrada, em vez de quebrar a conta da linha */
.obra { --r: 1; --r1: 1; --r2: 1;
margin: 0; flex-grow: var(--r); flex-basis: calc(var(--r) * 132px); }
.obra figure { margin: 0; }
/* Sem este vazio a ultima linha esticaria as poucas obras que sobram ate
a largura toda, e elas ficariam gigantes ao lado das outras. */
.obras::after { content: ""; flex-grow: 99999; }
.obra-abrir { display: block; text-decoration: none; color: var(--ink); }
/* Cada obra guarda a propria proporcao, sem caixa, sem corte e sem
borda: as obras vao de 180x160 a 150x60, e enquadrar todas num mesmo
retangulo ou cortaria as faixas do Luis, ou deixaria um palmo de vazio
em volta das deitadas. A grade nao alinha o pe das celulas de
proposito, e a legenda vem colada na imagem a que pertence. */
.obra-abrir img { display: block; width: 100%; height: auto; }
.obra-moldura { display: block; }
.obra-abrir:hover .obra-titulo { text-decoration: underline; text-underline-offset: 4px; }
.obra-abrir:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Obra de duas impressoes: as duas lado a lado, como estao na parede,
cada uma com a largura que a sua proporcao pede. O --r do ja e a
soma das duas, entao ela ocupa o espaco de duas na linha. */
.obra-dupla .obra-abrir { display: flex; gap: 10px; align-items: flex-start; }
.obra-dupla .obra-moldura { flex-grow: var(--r1); flex-basis: 0; }
.obra-dupla .obra-moldura + .obra-moldura { flex-grow: var(--r2); }
.obra-legenda { margin: 10px 0 0; font-size: 15px; line-height: 1.35; }
.obra-artista { display: block; font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.obra-titulo { display: block; font-family: var(--font-display); font-style: italic;
font-size: 17px; line-height: 1.2; }
.obra-ano { display: block; font-family: var(--font-numero); font-size: 13px;
letter-spacing: 0.1em; color: var(--muted); margin-top: 3px; }
/* Sem JavaScript a ficha abre embaixo da obra pelo :target, e ocupa a
largura toda: dentro de uma celula de 266px ela seria ilegivel. */
.obra-detalhe[hidden] { display: none; }
:root:not(.com-cartao) .obra:target { flex-basis: 100%; }
:root:not(.com-cartao) .obra:target .obra-detalhe[hidden] { display: block; }
:root:not(.com-cartao) .obra:target .obra-grande { max-width: 520px; }
:root:not(.com-cartao) .obra:target .obra-palco { max-width: 620px; }
:root:not(.com-cartao) .obra:target .obra-palco .obra-grande { max-width: none; }
.citacao { font-family: var(--font-display); font-style: italic; font-size: 19px;
line-height: 1.45; color: var(--ink); margin: 4px 0 30px;
padding-left: 20px; border-left: 1px solid var(--line-fina);
max-width: 40em; }
.perfil { font-size: 14px; }
/* Formularios ------------------------------------------------------ */
.form { margin: 24px 0 0; }
.campo { margin: 0 0 20px; }
.campo label { display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 7px; }
.campo input, .campo select, .campo textarea {
width: 100%; font-family: var(--font-texto); font-size: 16px;
color: var(--ink); background: transparent;
border: 1px solid var(--line); border-radius: 0;
padding: 12px 13px; -webkit-appearance: none; appearance: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none; box-shadow: inset 0 0 0 1px var(--ink);
}
.campo textarea { min-height: 120px; resize: vertical; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px;
overflow: hidden; }
.campo-ajuda { font-size: 13px; color: var(--muted); margin: 7px 0 0; }
.opcional { font-weight: 400; letter-spacing: 0.08em; color: var(--cinza);
text-transform: none; }
.lgpd { font-size: 12px; line-height: 1.5; color: var(--muted);
margin: 14px 0 0; max-width: 46em; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* A lista fica recolhida atras de um resumo, que abre ao clique. Usa o
details nativo: sem JavaScript ele abre e fecha do mesmo jeito. */
.caixa-escolher { border: 1px solid var(--line); }
.caixa-escolher summary {
list-style: none; cursor: pointer; padding: 12px 46px 12px 13px;
position: relative; font-size: 16px; line-height: 1.35; color: var(--ink);
}
.caixa-escolher summary::-webkit-details-marker { display: none; }
.caixa-escolher summary::after {
content: ""; position: absolute; right: 16px; top: 50%;
width: 8px; height: 8px; margin-top: -6px;
border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
transform: rotate(45deg); transition: transform 150ms ease-out;
}
.caixa-escolher[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.caixa-escolher summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.caixa-escolher[open] summary { border-bottom: 1px solid var(--line-fina); }
.caixa-escolher .escolher { border-top: none; padding: 0 13px; }
.caixa-escolher .escolher label:last-child { border-bottom: none; }
.escolhida { display: block; color: var(--ink); }
.escolhida b { display: block; font-family: var(--font-numero); font-weight: 400;
font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 2px; }
.escolhida u { display: block; text-decoration: none; font-size: 14px;
color: var(--muted); margin-top: 3px; }
/* o estado da inscricao nao precisa aparecer depois de escolhida */
.escolhida i { display: none; }
/* Lista de escolher uma, no lugar do select: no celular o seletor nativo
espreme o texto numa linha e deixa rolar ate opcao desabilitada. Aqui o
texto quebra a vontade e o que esta fechado nao clica. */
.rotulo-campo { display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 7px; }
.escolher { border-top: 1px solid var(--line-fina); }
.escolher label { display: grid; grid-template-columns: 20px 1fr; gap: 12px;
align-items: start; margin: 0; padding: 13px 2px;
border-bottom: 1px solid var(--line-fina);
font-size: 16px; font-weight: 400; letter-spacing: 0;
text-transform: none; cursor: pointer; }
.escolher label:hover { background: rgba(29, 29, 27, .03); }
/* Atividade com inscricao encerrada continua na lista, para ninguem achar
que ela sumiu da programacao, mas nao se escolhe: o disabled impede, e
o tom apagado diz por que antes de a pessoa tentar. */
.escolher label:has(input:disabled) { cursor: default; }
.escolher label:has(input:disabled):hover { background: none; }
.escolher input:disabled + span { color: var(--muted); }
.escolher input {
-webkit-appearance: radio; appearance: auto;
width: 18px; height: 18px; margin: 2px 0 0; padding: 0;
border: none; background: none; accent-color: var(--ink); cursor: pointer;
}
.escolher b { display: block; font-family: var(--font-numero); font-weight: 400;
font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 3px; }
.escolher u { display: block; font-size: 14px; text-decoration: none;
color: var(--muted); margin-top: 3px; }
.escolher i { display: block; font-style: normal; font-size: 13px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--cinza); margin-top: 4px; }
.escolher .fechada u { color: var(--cinza); }
.escolher .fechada { cursor: default; color: var(--cinza); }
.escolher .fechada:hover { background: none; }
.escolher .fechada input { cursor: default; }
/* Lista de marcar, usada em "quer conversar com um habitante" */
.marcar { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 2px 0 0; }
.marcar label { display: flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 400; letter-spacing: 0;
text-transform: none; margin: 0; cursor: pointer; }
.marcar input {
/* .campo input zera a aparencia de todo input do formulario, e num
checkbox isso apaga a marca. Aqui a aparencia nativa volta. */
-webkit-appearance: checkbox; appearance: auto;
width: 17px; height: 17px; flex: none; margin: 0; padding: 0;
border: none; background: none; border-radius: 0;
accent-color: var(--ink); cursor: pointer;
}
.botao {
display: inline-block; font-size: 12px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--bg); background: var(--ink);
border: 1px solid var(--ink); border-radius: 0;
padding: 15px 34px; cursor: pointer; text-decoration: none;
}
.botao:hover { color: var(--ink); background: transparent; }
.botao[disabled] { opacity: .45; cursor: default; }
/* Onde havia botao de inscricao, atividade encerrada diz que encerrou:
tirar o botao sozinho deixa a pessoa procurando onde clicar. */
.encerrada { display: inline-block; margin: 18px 0 0; padding: 9px 14px;
border: 1px solid var(--line-fina); font-size: 14px;
color: var(--muted); }
/* o display do .botao ganharia do [hidden], e o enviar apareceria
em toda etapa, nao so na ultima */
.botao[hidden] { display: none; }
/* o contorno de foco do navegador e amarelo e destoa: este fica no traco
da casa, sem tirar a marca de onde o teclado esta */
.botao:focus-visible, .menu a:focus-visible, .porta:focus-visible,
.evento-abrir:focus-visible, .modal-fechar:focus-visible {
outline: 2px solid var(--ink); outline-offset: 3px;
}
.botao-vazado { color: var(--ink); background: transparent; }
.botao-vazado:hover { color: var(--bg); background: var(--ink); }
/* Formulario em etapas ---------------------------------------------
O fieldset agrupa de verdade, para o leitor de tela anunciar a etapa.
A aparencia nativa dele sai inteira. */
.etapa { border: none; margin: 0; padding: 0; min-width: 0; }
.etapa[hidden] { display: none; }
.etapa legend { display: block; padding: 0; float: left; width: 100%;
font-family: var(--font-display); font-size: 23px; line-height: 1.15;
margin: 0 0 6px; }
.etapa legend + * { clear: both; }
.etapa-abertura { margin: 0 0 20px; max-width: 62ch; }
.etapa-conta { font-family: var(--font-numero); font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--cinza); margin: 0 0 10px; }
/* A passagem entre etapas usa o mesmo desenho da passagem entre
atividades do cartao. Aqui sao botoes, e nao links, entao a aparencia
de botao precisa sair. */
.etapa-passo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
margin: 26px 0 24px; padding: 0 0 20px;
border-bottom: 1px solid var(--line-fina); }
.etapa-passo .passo { font: inherit; text-align: left; background: none; border: none;
padding: 0; cursor: pointer; }
.etapa-passo .passo-depois { text-align: right; }
[data-arco-pratica][hidden] { display: none; }
/* Instrucao que so serve quando tudo aparece de uma vez */
.com-js .so-sem-js { display: none; }
/* Lista de marcar empilhada, para opcao de frase longa */
.marcar-empilhado { flex-direction: column; gap: 10px; align-items: flex-start; }
.marcar-empilhado label { align-items: flex-start; }
.marcar-empilhado input { margin-top: 2px; }
/* Tela de recebido, no lugar do formulario enviado */
.recebido { margin: 24px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.recebido[hidden] { display: none; }
.recebido .botao { margin-top: 18px; }
.aviso { margin: 26px 0 0; padding: 18px 20px; border: 1px solid var(--line-fina);
font-size: 15px; color: var(--muted); }
/* Ficha de dados --------------------------------------------------- */
.ficha { display: grid; grid-template-columns: 160px 1fr; gap: 5px 20px;
margin: 18px 0 0; font-size: 16px; }
.ficha dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); padding-top: 5px; }
.ficha dd { margin: 0; }
/* Ficha em faixa: usada na galeria, no lugar da pilha de linhas ---- */
.faixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px;
margin: 22px 0 0; padding: 22px 0; border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line); }
.faixa dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.faixa dd { margin: 0 0 2px; font-size: 16px; }
/* O curatorial abre e fecha, porque e um texto longo no meio da ficha da
exposicao e nem todo mundo chega nele agora. E de verdade, e
nao um abre-e-fecha em JavaScript: funciona com o script desligado, o
Cmd+F do navegador acha o texto fechado, e o teclado ja sabe operar. */
.curatorial-abre { margin: 34px 0 0; border-top: 1px solid var(--line-fina); }
.curatorial-abre > summary {
list-style: none; cursor: pointer; position: relative;
display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
padding: 18px 38px 18px 0;
}
.curatorial-abre > summary::-webkit-details-marker { display: none; }
.curatorial-titulo { font-family: var(--font-display); font-weight: 200;
font-size: 27px; line-height: 1.15; }
/* Um titulo sozinho passa por titulo, e ninguem clica. A palavra de acao
diz o que fazer, e ela troca sozinha quando abre. E decorativa, por isso
vem por CSS e com aria-hidden: quem usa leitor de tela ja ouve do
proprio se ele esta aberto ou fechado. */
.curatorial-acao { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); white-space: nowrap; }
.curatorial-acao::before { content: "clique para ler"; }
.curatorial-abre[open] .curatorial-acao::before { content: "fechar"; }
.curatorial-abre > summary:hover .curatorial-titulo,
.curatorial-abre > summary:focus-visible .curatorial-titulo {
text-decoration: underline; text-underline-offset: 5px;
text-decoration-thickness: 1px;
}
.curatorial-abre > summary:hover .curatorial-acao { color: var(--ink); }
.curatorial-abre > summary::after {
content: ""; position: absolute; right: 6px; top: 50%;
width: 10px; height: 10px; margin-top: -9px;
border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
transform: rotate(45deg); transition: transform 150ms ease-out;
}
.curatorial-abre[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
.curatorial-abre > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* dentro do details a moldura de cima seria a segunda linha seguida */
.curatorial-abre .curatorial { margin-top: 0; padding-top: 0; border-top: none; }
/* A dica de abrir fica na linha do titulo, a direita: e instrucao de uso,
nao e texto da exposicao, entao nao entra no corpo. */
.obras-topo { display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap; }
.obras-topo h3 { margin-bottom: 0; }
.obras-dica { margin: 0; font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--muted); }
/* Texto curatorial: assinado, entao ganha respiro e coluna mais estreita
que o resto da pagina, para ler como texto de exposicao e nao como
bloco de servico. */
.curatorial { margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-fina); }
.curatorial > .rotulo { color: var(--muted); margin-bottom: 18px; }
/* Justificado e com capitular abrindo cada paragrafo, como no documento
que veio da diagramacao. A largura e a da pagina inteira, e nao a
coluna estreita de antes: e o que deixa o texto horizontal. */
.curatorial p { max-width: none; margin: 0 0 15px; text-align: justify;
hyphens: auto;
/* A hifenizacao automatica sozinha deixa toco na linha de baixo, do
tipo "pertencimen-/to" ou "molhad-/o". Os limites cortam isso.
Os numeros sao 12 6 5, e nao valores menores, porque o Chrome NAO
respeita o limite de letras depois do hifen: com 8 4 3 o resultado e
identico ao automatico, com caudas de uma e duas letras em todas as
larguras. O que funciona e o primeiro numero, o tamanho minimo da
palavra. Com 12 nao sobrou nenhuma cauda menor que tres letras em
nenhuma largura de 375 a 1660 pixels, que foi como isto foi medido.
Baixar esses numeros traz o defeito de volta. */
hyphenate-limit-chars: 12 6 5;
-webkit-hyphenate-limit-before: 6;
-webkit-hyphenate-limit-after: 5; }
/* Capitular alinhada pela base da segunda linha, e nao pela altura da
caixa. Os numeros saem de metricas medidas no navegador, nao de chute:
texto Arial 16px, entrelinha 25.6px, ascendente 14, descendente 3
-> meia entrelinha 4.3, base da 1a linha 18.3, base da 2a 43.9
PP Migra: ascendente 0.81 do corpo, descendente 0.30, maiuscula 0.675
O corpo 3.17em foi escolhido pelo Bill no ajustador. Com ele, a
entrelinha 0.68 e o recuo de 0.27em poem a base da capitular na base
da segunda linha e deixam o rodape do flutuante em 48.2px, tres pixels
antes das duas linhas (51.2px).
ESSES TRES PIXELS SAO O PONTO. Uma versao anterior fechava em 51.0px,
com 0.2px de folga, e batia certo na minha tela e errado na do Bill:
qualquer arredondamento de zoom ou de densidade de tela empurrava o
rodape para depois das duas linhas, e a terceira linha grudava no lado
da letra em vez de comecar embaixo dela. O recuo vai em em, e nao em
px, para acompanhar quando o corpo do texto mudar.
Mexeu no corpo do texto ou na fonte, as tres mudam juntas. */
.curatorial p.capitular::first-letter {
float: left; font-family: var(--font-display); font-weight: 200;
font-size: 3.17em; line-height: 0.68; margin-top: 0.27em;
/* O vao ate o texto e este espaco mais a folga da propria letra, que
na PP Migra e 3.1px neste corpo. Com 3px aqui, o texto comeca 6.1px
depois da tinta do E. */
padding: 0 3px 0 0;
}
.curatorial .assina { font-family: var(--font-display); font-style: italic;
font-size: 18px; color: var(--ink);
text-align: right; margin-top: 24px; }
/* Bloco reservado: o conteudo ainda nao foi divulgado -------------- */
.censura {
margin: 34px 0 0; height: 260px; display: flex;
align-items: center; justify-content: center;
background-color: var(--ink);
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.045) 0 1px, transparent 1px),
radial-gradient(circle at 70% 60%, rgba(255,255,255,.035) 0 1px, transparent 1px),
radial-gradient(circle at 45% 85%, rgba(255,255,255,.04) 0 1px, transparent 1px);
background-size: 7px 7px, 11px 11px, 13px 13px;
}
.censura span { font-family: var(--font-display); font-size: 20px;
color: var(--bg); letter-spacing: 0.06em; }
/* Rodape ----------------------------------------------------------- */
.rodape { margin: 80px 0 0; padding: 24px 0 48px; border-top: 1px solid var(--line);
font-size: 12px; letter-spacing: 0.1em; color: var(--muted);
text-align: center; }
/* na capa o filete ja fecha a lista de cards, entao o rodape nao repete a
linha: fica so o respiro. Precisa vir depois de .rodape para vencer. */
.rodape-solto { border-top: none; margin-top: 96px; padding-top: 0; }
.rodape-logo { display: block; height: 34px; width: auto; margin: 0 auto 12px; }
.rodape a { color: var(--muted); }
.rodape p { margin: 0 0 5px; }
/* Celular ---------------------------------------------------------- */
@media (max-width: 720px) {
h1 { font-size: 38px; }
h2 { font-size: 24px; margin-top: 40px; }
.capa .marca { height: 78px; }
.lead { font-size: 17px; }
.topo { align-items: center; }
.marca { height: 52px; }
.topo-dados { display: none; }
.porta { padding: 22px 0; }
.porta-titulo { font-size: 32px; }
.menu { gap: 4px 18px; font-size: 11px; letter-spacing: 0.1em; }
.linha { grid-template-columns: 1fr; }
.dia { border-right: none; border-bottom: 1px solid var(--line-fina);
padding: 14px 16px; font-size: 38px;
flex-direction: row; align-items: baseline; gap: 10px; }
.dia-mes { margin-top: 0; }
.evento { padding: 18px; }
.eixos { grid-template-columns: 1fr; gap: 18px; }
.eixos-so-nome { grid-template-columns: 1fr; gap: 8px; margin-top: 40px; }
.eixos-so-nome p { font-size: 26px; }
.frase { font-size: 21px; }
.faixa { grid-template-columns: 1fr; gap: 16px; }
.censura { height: 190px; }
.modal { padding: 14px; }
.modal-cartao { padding: 28px 22px 26px; max-height: 88vh; }
.modal-cartao .detalhe-titulo { font-size: 23px; }
.modal-cartao .faixa { grid-template-columns: 1fr; gap: 16px; margin: 18px 0 20px; }
.modal-cartao .eixos { gap: 18px; }
/* as duas passagens seguem lado a lado em qualquer largura: encolhem,
nao empilham */
.modal-passo, .etapa-passo { gap: 14px; }
.modal-passo { margin-top: 24px; }
.passo-quando { font-size: 11px; letter-spacing: 0.08em; }
.passo-titulo { font-size: 15px; }
.etapa legend { font-size: 20px; }
.habitante-corpo { grid-template-columns: 1fr; }
.trabalho { max-width: 300px; }
.trabalho-vazio { aspect-ratio: 4 / 5; }
/* a base cai para caberem duas ou tres por linha no celular, em vez de
uma fila de fotos gigantes, que e a pior leitura possivel de catalogo */
.obras { gap: 24px 16px; }
.obra { flex-basis: calc(var(--r) * 92px); }
.obra-titulo { font-size: 15px; }
.obra-dupla .obra-abrir { gap: 6px; }
.modal-obra .obra-grande { max-height: 56vh; }
.obra-palco { max-width: calc(52vh * var(--palco)); }
.obra-palco .obra-grande { max-height: none; }
.dupla { grid-template-columns: 1fr; }
.ficha { grid-template-columns: 1fr; gap: 2px; }
.ficha dt { padding-top: 14px; }
}