/* Black Boats
   Tipografia : Bricolage Grotesque (display, eixo de largura) + Newsreader (leitura)
   Paleta     : breu (o nome da marca) + papel (carta nautica) + verde de boreste (acento unico)
   Imagem     : foto grande no comeco de cada pagina, com veu escuro so onde ha texto
   Movimento  : foto com deriva no scroll, revelacao das listas, transicao entre paginas */

@font-face{font-family:Bricolage;src:url(/f/bricolage.woff2) format('woff2');
 font-weight:300 800;font-stretch:78% 100%;font-display:swap}
@font-face{font-family:Newsreader;src:url(/f/newsreader.woff2) format('woff2');
 font-weight:350 700;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/f/newsreader-italic.woff2) format('woff2');
 font-weight:400 600;font-style:italic;font-display:swap}

:root{
 --breu:#0b0c0e; --breu2:#15171a;
 --papel:#f3f0e9; --papel2:#e9e4d9;
 --tinta:#15171a; --tinta-fraca:#54585c;
 --gelo:#efece4;  --gelo-fraco:#b6babe;
 --sinal:#0a7350; --sinal-claro:#46d99a;
 --linha:rgba(11,12,14,.15); --linha-clara:rgba(239,236,228,.17);
 --display:Bricolage,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --leitura:Newsreader,ui-serif,Georgia,"Times New Roman",serif;
 --e1:.25rem;--e2:.5rem;--e3:.875rem;--e4:1.375rem;--e5:2.25rem;
 --e6:3.5rem;--e7:5.5rem;--e8:8.5rem;
 --medida:38rem; --amplo:76rem;
 --curva:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{font:400 1.125rem/1.72 var(--leitura);color:var(--tinta);background:var(--papel);
 -webkit-font-smoothing:antialiased;overflow-x:hidden}

img{max-width:100%;display:block}
::selection{background:var(--sinal-claro);color:var(--breu)}
:focus-visible{outline:2px solid var(--sinal);outline-offset:3px;border-radius:2px}
.escuro :focus-visible,.palco :focus-visible,.topo :focus-visible,
.rodape :focus-visible,.porta:focus-visible{outline-color:var(--sinal-claro)}

.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--breu);color:var(--gelo);
 padding:var(--e3) var(--e4);font:600 .95rem var(--display);text-decoration:none}
.pular:focus{left:0}

.escuro{background:var(--breu);color:var(--gelo)}
.claro{background:var(--papel);color:var(--tinta)}
.areia{background:var(--papel2);color:var(--tinta)}
.dentro{max-width:var(--amplo);margin:0 auto;padding-left:var(--e4);padding-right:var(--e4)}
@media(min-width:48em){.dentro{padding-left:var(--e5);padding-right:var(--e5)}}

/* ---------- topo: pousa sobre a foto, sem fundo proprio ---------- */
.topo{position:absolute;top:0;left:0;right:0;z-index:5;color:var(--gelo);
 view-transition-name:topo}
.topo.solido{position:static;background:var(--breu)}
.topo .dentro{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3) var(--e5);
 padding-top:var(--e4);padding-bottom:var(--e4)}
.marca{font:800 1.05rem/1 var(--display);font-stretch:82%;letter-spacing:.015em;
 text-transform:uppercase;color:var(--gelo);text-decoration:none;white-space:nowrap;
 text-shadow:0 1px 14px rgba(0,0,0,.6)}
.marca i{font-style:normal;font-weight:300;color:var(--gelo-fraco);transition:color .22s var(--curva)}
.marca:hover i,.marca:focus i{color:var(--sinal-claro)}
.navega{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin-left:auto}
.navega a{font:500 .92rem/1 var(--display);color:var(--gelo);text-decoration:none;
 padding:var(--e2) 0;position:relative;text-shadow:0 1px 14px rgba(0,0,0,.65);
 transition:color .22s var(--curva)}
.navega a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
 background:var(--sinal-claro);transition:right .3s var(--curva)}
.navega a:hover,.navega a:focus-visible{color:var(--sinal-claro)}
.navega a:hover::after,.navega a:focus-visible::after{right:0}
.navega a[aria-current=page]::after{right:0;background:var(--gelo)}

/* ---------- palco: a foto que abre a pagina ---------- */
.palco{position:relative;isolation:isolate;overflow:clip;background:var(--breu);
 display:flex;align-items:flex-end;min-height:30rem}
.palco.alto{min-height:min(88svh,48rem)}
.palco .foto{position:absolute;inset:0;z-index:-2;background-size:cover;
 background-position:center}
.palco .foto img{width:100%;height:100%;object-fit:cover}
.palco::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(to top,rgba(7,8,10,.96) 0%,rgba(7,8,10,.93) 30%,
  rgba(7,8,10,.86) 48%,rgba(7,8,10,.55) 70%,rgba(7,8,10,.44) 86%,rgba(7,8,10,.74) 100%)}
.palco .dentro{position:relative;z-index:1;width:100%;
 padding-top:var(--e8);padding-bottom:var(--e6)}
.palco.alto .dentro{padding-bottom:var(--e7)}

.chapeu{font:400 italic 1.05rem/1.4 var(--leitura);color:var(--sinal-claro);
 margin-bottom:var(--e3);display:block}
.palco .chapeu{text-shadow:0 1px 18px rgba(0,0,0,.85)}
.claro .chapeu,.areia .chapeu{color:var(--sinal)}

.palco h1{font:700 clamp(2.1rem,6.4vw,4.4rem)/1.03 var(--display);font-stretch:86%;
 letter-spacing:-.028em;color:var(--gelo);max-width:16ch;text-wrap:balance;
 text-shadow:0 2px 34px rgba(0,0,0,.5)}
.palco.alto h1{font:800 clamp(2.7rem,9.4vw,6.2rem)/.95 var(--display);font-stretch:80%;
 letter-spacing:-.038em;max-width:13ch}
.palco h1 em{font:400 italic 1em/1 var(--leitura);font-stretch:normal;letter-spacing:-.02em;
 color:var(--sinal-claro)}
.palco .resumo{font:400 1.18rem/1.65 var(--leitura);color:var(--gelo);opacity:.92;
 margin-top:var(--e4);max-width:46ch;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.palco.alto .resumo{margin-top:var(--e5)}
@media(min-width:48em){.palco.alto h1{font-stretch:86%}}

/* credito da foto, discreto no canto */
.credito{position:absolute;right:var(--e4);bottom:var(--e3);z-index:2;
 font:400 .72rem/1 var(--display);color:rgba(239,236,228,.5);letter-spacing:.02em}

/* ---------- linha d'agua ---------- */
.agua{border-top:1px solid var(--linha);position:relative;padding-top:var(--e5)}
.agua::before{content:"";position:absolute;top:-2px;left:0;width:3.5rem;height:3px;
 background:var(--sinal)}
.escuro .agua{border-top-color:var(--linha-clara)}
.escuro .agua::before{background:var(--sinal-claro)}

/* ---------- secoes ---------- */
.secao{padding-top:var(--e6);padding-bottom:var(--e6)}
@media(min-width:48em){.secao{padding-top:var(--e7);padding-bottom:var(--e7)}}
.secao h2{font:600 clamp(1.5rem,3.6vw,2.3rem)/1.12 var(--display);font-stretch:90%;
 letter-spacing:-.02em;margin-bottom:var(--e2)}
.secao h2 em{font:400 italic 1em var(--leitura);font-stretch:normal;color:var(--sinal)}
.escuro .secao h2 em{color:var(--sinal-claro)}
.secao .sub{color:var(--tinta-fraca);max-width:48ch;font-size:1.05rem;margin-bottom:var(--e5)}
.escuro .secao .sub{color:var(--gelo-fraco)}

/* secao em duas colunas: texto de um lado, foto do outro */
.dupla{display:grid;gap:var(--e5)}
@media(min-width:56em){
 .dupla{grid-template-columns:1fr 1fr;gap:var(--e6);align-items:center}
 .dupla.invertida>.lado-foto{order:-1}
}
.lado-foto{position:relative;border-radius:12px;overflow:hidden;background:var(--breu2);
 aspect-ratio:4/3}
.lado-foto img{width:100%;height:100%;object-fit:cover;
 transition:transform .9s var(--curva)}
.lado-foto:hover img{transform:scale(1.04)}
@media(min-width:56em){.lado-foto{aspect-ratio:3/4;max-height:34rem}}

/* ---------- lista editorial numerada ---------- */
.trilha{list-style:none;counter-reset:n}
.trilha li{counter-increment:n;border-top:1px solid var(--linha)}
.trilha li:last-child{border-bottom:1px solid var(--linha)}
.escuro .trilha li{border-top-color:var(--linha-clara)}
.escuro .trilha li:last-child{border-bottom-color:var(--linha-clara)}
.trilha a{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--e3);
 padding:var(--e4) 0;text-decoration:none;color:inherit;
 transition:padding-left .32s var(--curva),background-color .32s var(--curva)}
.trilha a::before{content:counter(n,decimal-leading-zero);grid-column:1;grid-row:1;
 font:500 .82rem/1.9 var(--display);font-stretch:85%;color:var(--tinta-fraca);
 font-variant-numeric:tabular-nums;transition:color .24s var(--curva)}
.escuro .trilha a::before{color:var(--gelo-fraco)}
.trilha b{grid-column:2;grid-row:1;font:600 clamp(1.05rem,2.1vw,1.3rem)/1.3 var(--display);
 font-stretch:92%;letter-spacing:-.012em;display:block;margin-bottom:var(--e1);
 text-wrap:balance}
.trilha span{grid-column:2;grid-row:2;display:block;color:var(--tinta-fraca);
 font-size:1rem;line-height:1.55;max-width:60ch;text-wrap:pretty}
.escuro .trilha span{color:var(--gelo-fraco)}
.trilha a:hover,.trilha a:focus-visible{padding-left:var(--e3);background:rgba(10,115,80,.055)}
.escuro .trilha a:hover,.escuro .trilha a:focus-visible{background:rgba(70,217,154,.08)}
.trilha a:hover::before,.trilha a:focus-visible::before{color:var(--sinal)}
.escuro .trilha a:hover::before,.escuro .trilha a:focus-visible::before{color:var(--sinal-claro)}
.trilha a:hover b,.trilha a:focus-visible b{text-decoration:underline;
 text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- portas: entradas com foto ---------- */
.portas{display:grid;gap:var(--e4);margin-top:var(--e5)}
@media(min-width:44em){.portas{grid-template-columns:repeat(3,1fr)}
 .portas.pesada{grid-template-columns:1.5fr 1fr 1fr}}
.porta{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;
 min-height:16rem;display:flex;align-items:flex-end;padding:var(--e4);
 text-decoration:none;color:var(--gelo);background:var(--breu2)}
.porta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
 transition:transform .8s var(--curva)}
.porta::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(to top,rgba(7,8,10,.93) 8%,rgba(7,8,10,.5) 52%,rgba(7,8,10,.3) 100%);
 transition:opacity .4s var(--curva)}
.porta:hover img,.porta:focus-visible img{transform:scale(1.06)}
.porta:hover::after,.porta:focus-visible::after{opacity:.82}
.porta div{position:relative}
.porta b{display:block;font:700 1.35rem/1.15 var(--display);font-stretch:88%;
 letter-spacing:-.018em;margin-bottom:var(--e1)}
.porta.pesada b,.portas.pesada .porta:first-child b{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.porta span{display:block;color:var(--gelo-fraco);font-size:.98rem;line-height:1.45}
@media(min-width:44em){.portas.pesada .porta:first-child{min-height:21rem}}

/* ---------- corpo de leitura ---------- */
.texto{max-width:var(--medida);padding-top:var(--e5);padding-bottom:var(--e7)}
.texto p,.texto ul,.texto ol,.texto table,.texto blockquote,.texto .rolagem,
.texto dl,.texto figure{margin-top:var(--e4)}
.texto h2{font:600 clamp(1.4rem,3.1vw,1.8rem)/1.2 var(--display);font-stretch:92%;
 letter-spacing:-.015em;margin-top:var(--e6);margin-bottom:var(--e3)}
.texto h3{font:600 1.2rem/1.3 var(--display);font-stretch:94%;
 margin-top:var(--e5);margin-bottom:var(--e2)}
.texto h4,.texto h5{font:600 1.05rem/1.35 var(--display);
 margin-top:var(--e5);margin-bottom:var(--e2)}
.texto>*:first-child,.texto>div:first-child>*:first-child{margin-top:0}
.texto h2+p,.texto h3+p,.texto h4+p,.texto h2+ul,.texto h3+ul{margin-top:0}
.texto p{text-wrap:pretty}
.texto a{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;
 text-underline-offset:3px;text-decoration-color:var(--sinal);
 transition:color .2s var(--curva),text-decoration-thickness .2s var(--curva)}
.texto a:hover,.texto a:focus-visible{color:var(--sinal);text-decoration-thickness:2px}
.texto ol{padding-left:1.35rem;list-style:decimal}
.texto li+li{margin-top:var(--e2)}
.texto ul{list-style:none;padding-left:0}
.texto ul li{padding-left:1.4rem;position:relative}
.texto ul li::before{content:"";position:absolute;left:0;top:.72em;width:.5rem;height:1px;
 background:var(--sinal)}
.texto blockquote{border-left:2px solid var(--sinal);padding-left:var(--e4);
 font-style:italic;color:var(--tinta-fraca)}
.texto hr{border:0;border-top:1px solid var(--linha);margin-top:var(--e5)}

.texto table{width:100%;border-collapse:collapse;font:400 1rem/1.5 var(--leitura);
 font-variant-numeric:tabular-nums}
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.texto th,.texto td{text-align:left;padding:var(--e3) var(--e3) var(--e3) 0;
 border-bottom:1px solid var(--linha);vertical-align:top}
.texto thead th{font:600 .82rem/1.3 var(--display);font-stretch:88%;text-transform:uppercase;
 letter-spacing:.06em;color:var(--tinta-fraca);border-bottom-color:var(--tinta)}
.texto tbody th,.texto td:first-child{font-family:var(--display);font-weight:500;font-size:.98rem}
.texto tr:last-child th,.texto tr:last-child td{border-bottom:0}

/* leitura seguida: para onde ir depois do artigo */
.adiante{border-top:1px solid var(--linha);padding-top:var(--e5);margin-top:var(--e6)}
.adiante h2{font:600 .8rem/1 var(--display);text-transform:uppercase;letter-spacing:.11em;
 color:var(--tinta-fraca);margin-bottom:var(--e4);margin-top:0}
/* a trilha traz o proprio contador; o marcador nativo do corpo nao vale aqui */
.texto .trilha,.adiante .trilha{list-style:none;padding-left:0;margin-top:0}
.texto .trilha li{margin-top:0}

/* ---------- rodape ---------- */
.rodape{position:relative;isolation:isolate;overflow:hidden;background:var(--breu);
 color:var(--gelo-fraco);padding-top:var(--e6);padding-bottom:var(--e5);font-size:1rem}
.rodape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
 opacity:.3}
.rodape::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(to bottom,rgba(11,12,14,.93),rgba(11,12,14,.99))}
.rodape .assinatura{font:800 clamp(2.2rem,9.5vw,5.4rem)/.9 var(--display);font-stretch:80%;
 letter-spacing:-.038em;text-transform:uppercase;color:var(--gelo);
 padding-bottom:var(--e5);border-bottom:1px solid var(--linha-clara)}
.rodape .assinatura em{font:400 italic 1em var(--leitura);font-stretch:normal;
 text-transform:none;letter-spacing:-.02em;color:var(--sinal-claro)}
.rodape .pes{display:flex;flex-wrap:wrap;gap:var(--e4) var(--e6);padding-top:var(--e5);
 align-items:flex-start}
.rodape nav{display:flex;flex-direction:column;gap:var(--e2)}
.rodape h2{font:600 .78rem/1 var(--display);text-transform:uppercase;letter-spacing:.1em;
 color:var(--gelo-fraco);margin-bottom:var(--e2)}
.rodape a{color:var(--gelo);text-decoration:none;font-size:1rem;transition:color .2s var(--curva)}
.rodape a:hover,.rodape a:focus-visible{color:var(--sinal-claro)}
.rodape .fim{width:100%;color:var(--gelo-fraco);font-size:.92rem;line-height:1.6;
 border-top:1px solid var(--linha-clara);padding-top:var(--e4);margin-top:var(--e3);
 max-width:62ch}

/* ---------- movimento ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sai .2s ease both}
::view-transition-new(root){animation:entra .44s var(--curva) both}
@keyframes sai{to{opacity:0}}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@keyframes surge{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes deriva{from{transform:scale(1.02) translateY(0)}
 to{transform:scale(1.12) translateY(5%)}}

@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .revela{animation:surge linear both;animation-timeline:view();
   animation-range:entry 4% cover 20%}
  .palco .foto img{animation:deriva linear both;animation-timeline:view();
   animation-range:entry 0% exit 100%}
 }
}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- telas estreitas ---------- */
@media(max-width:47.99em){
 body{font-size:1.0625rem}
 .topo .dentro{gap:var(--e2) var(--e4);padding-top:var(--e2);padding-bottom:var(--e2)}
 .navega{margin-left:0;width:100%;gap:0 var(--e4)}
 .palco{min-height:27rem}
 .palco.alto{min-height:min(82svh,40rem)}
 .palco .dentro{padding-top:11.5rem}
 .rodape .pes{gap:var(--e5)}
 .rodape nav{gap:0}
 .trilha a{grid-template-columns:2.1rem 1fr;gap:var(--e2)}
 .porta{min-height:13rem}
}

/* alvo de toque de 44px onde se toca com o dedo */
@media(pointer:coarse){
 .navega a{padding:15px 0}
 .marca{padding:14px 0}
 .rodape a{padding:8px 0}
 .rodape h2{margin-bottom:0}
 .texto a{padding:2px 0}
}