/* Bruno Spadoni Photography — layout "Penumbra" (home PT e EN).
   Direção e decisões: docs/redesign-home/README.md */
:root{
  --noite:#090909; --papel:#f2efe9;
  --claro:#f4f1eb; --tinta:#111110;
  --dim-noite:#aaa69e; --dim-papel:#66625b;
  --fio-noite:#2a2927; --fio-papel:#d5d0c6;
  --logo:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --serif:'Cormorant Garamond','Cormorant','Iowan Old Style',Georgia,serif;
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gut:clamp(18px,7vw,90px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noite);color:var(--claro);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.pular{position:absolute;left:-999px;top:0;z-index:400;background:var(--claro);color:var(--tinta);padding:10px 16px}
.pular:focus{left:0}

.faixa{--fg:var(--claro);--bg:#090909;--bg0:rgba(9,9,9,0);--dim:var(--dim-noite);--fio:var(--fio-noite);background:var(--bg);color:var(--fg)}
.faixa.papel{--fg:var(--tinta);--bg:#f2efe9;--bg0:rgba(242,239,233,0);--dim:var(--dim-papel);--fio:var(--fio-papel)}
.in{max-width:1320px;margin-inline:auto;padding-inline:var(--gut);width:100%}
.dim{color:var(--dim)}
.rot{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
h2,.h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.8vw,3.7rem);line-height:1.04;letter-spacing:-.005em}
.bloco{padding-block:clamp(60px,9vw,120px)}

/* marca */
.assin{font-family:var(--logo);font-size:1.0625rem;letter-spacing:.3em;text-transform:uppercase;line-height:1;white-space:nowrap}
.selo{display:inline-grid;grid-template-rows:1fr 1fr;width:2em;height:3em;border:.07em solid var(--fg);flex:none}
.selo b{display:grid;place-items:center;font-family:var(--logo);font-weight:500;font-size:1.22em;line-height:1;color:var(--fg)}
.selo b:first-child{background:var(--fg);color:var(--bg)}
.marca{display:flex;align-items:center;gap:16px}

/* ligações e botões */
.ir{display:inline-flex;align-items:center;gap:18px;align-self:flex-start}
.ir span{border-bottom:1px solid currentColor;padding-bottom:4px}
.ir svg{width:26px;height:10px;transition:transform .25s ease}
.ir:hover svg{transform:translateX(4px)}
.botao{display:inline-flex;align-items:center;gap:12px;background:var(--fg);color:var(--bg);padding:1.05em 1.9em;transition:opacity .25s ease}
.botao:hover{opacity:.82}
.botao svg{width:16px;height:16px;flex:none}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px}

/* abertura */
.abre{position:relative;height:clamp(480px,60vw,780px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.palco{position:absolute;inset:0}
.palco img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity 1s ease}
.palco img.on{opacity:1}
.palco::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,9,9,.66) 0%,rgba(9,9,9,0) 24%,rgba(9,9,9,0) 46%,rgba(9,9,9,.78) 82%,#090909 100%)}
.abre>.in{position:relative}
.topo{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:26px}
.topo .selo{font-size:11px}
.menu{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px)}
.menu a{transition:opacity .2s ease}
.menu a:hover{opacity:.65}
.lingua{display:flex;gap:.6em}
.lingua a:not(.aqui){opacity:.55}
.lingua a:not(.aqui):hover{opacity:1}
.menu-btn{all:unset;display:none;cursor:pointer;padding:12px 0 12px 16px}
.sob{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:clamp(22px,4vw,44px)}
.sob .obra-tit{display:block;font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;padding-bottom:14px}
.sob .linhas{display:flex;flex-direction:column;gap:7px}
.passo{display:flex;align-items:center;gap:22px;padding-bottom:8px}
.passo .cont{font-variant-numeric:tabular-nums}
.passo button{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;margin:-10px}
.passo svg{width:16px;height:16px}

/* apresentação */
.intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:end;padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,64px)}
.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.02;letter-spacing:-.008em;text-wrap:balance}
.intro .lado{display:flex;flex-direction:column;gap:26px}
.intro .lado p{max-width:30em;font-size:1.0625rem}
.creds{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 34px;padding-block:20px;border-top:1px solid var(--fio)}
.aviso{display:block;text-align:center;padding:16px var(--gut);border-top:1px solid var(--fio);transition:opacity .2s ease}
.aviso:hover{opacity:.7}

/* séries: a foto ocupa o bloco e se desfaz na direção do texto */
.serie{position:relative;min-height:clamp(440px,50vw,700px);display:flex;align-items:center;overflow:hidden}
.foto{position:absolute;top:0;bottom:0;right:0;width:72%}
.serie.inv .foto{right:auto;left:0}
.foto img{width:100%;height:100%;max-width:none;object-fit:cover}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 0%,var(--bg0) 46%),linear-gradient(to top,var(--bg) 0%,var(--bg0) 16%),linear-gradient(to bottom,var(--bg) 0%,var(--bg0) 16%)}
.serie.inv .foto::after{background:linear-gradient(to left,var(--bg) 0%,var(--bg0) 46%),linear-gradient(to top,var(--bg) 0%,var(--bg0) 16%),linear-gradient(to bottom,var(--bg) 0%,var(--bg0) 16%)}
.papel .funde img{mix-blend-mode:multiply}
.papel .funde::after{display:none}
.serie .in{position:relative}
.txt{display:flex;flex-direction:column;gap:22px;width:min(100%,21em)}
.serie.inv .txt{margin-left:auto}
.txt p{font-size:1.0625rem}

/* destaque com três imagens (coleção, obras, open edition) */
.par{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:clamp(28px,6vw,80px);align-items:center}
.par .txt{width:auto;max-width:24em}
.cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:clamp(28px,5vw,48px)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.trio a{display:flex;flex-direction:column;gap:14px}
.trio .q{aspect-ratio:3/2;overflow:hidden}
.trio img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.trio a:hover img{transform:scale(1.04)}
.papel .trio .funde{mix-blend-mode:multiply}
.trio b{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.15;display:block;padding-bottom:6px}

/* como adquirir */
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3.4vw,48px);counter-reset:p}
.passos li{counter-increment:p;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--fio);padding-top:18px}
.passos li::before{content:"0" counter(p);font-size:.6875rem;letter-spacing:.24em;color:var(--dim)}
.passos b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15}
.passos p{color:var(--dim);font-size:.9375rem}
.passos p a{text-decoration:underline;text-underline-offset:3px}
.lead{max-width:34em;font-size:1.0625rem;color:var(--dim);padding-top:18px}

/* artista */
.artista{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:clamp(30px,7vw,100px);align-items:center}
.artista img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.04)}
.artista .col{display:flex;flex-direction:column;gap:24px;max-width:36em}
.artista .grande{font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.3}
.artista strong{font-weight:inherit;color:var(--fg)}
.premios{display:flex;flex-direction:column;gap:12px}
.premios li{display:flex;flex-direction:column}
.premios small{font-size:.8125rem;color:var(--dim)}

/* chamada final */
.chamada{position:relative;overflow:hidden;text-align:center}
.chamada .fundo{position:absolute;inset:0}
.chamada .fundo img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:.22}
.chamada .fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,var(--bg0) 30%,var(--bg0) 70%,var(--bg) 100%)}
.chamada .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.chamada p{max-width:32em;color:var(--dim);font-size:1.0625rem}
.chamada .acoes{justify-content:center}
.chamada .ir{align-self:center}

/* fecho */
.fecho{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.25fr) minmax(0,1.15fr);padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,64px)}
.fecho>div{padding-inline:clamp(20px,3.4vw,44px);border-left:1px solid var(--fio);display:flex;flex-direction:column;gap:18px}
.fecho>div:first-child{padding-left:0;border-left:0}
.fecho .marca{gap:20px;padding-bottom:6px}
.fecho .marca .selo{font-size:17px}
.fecho .lema{font-size:1.125rem;max-width:17em;color:var(--dim)}
.fecho ul{display:flex;flex-direction:column;gap:12px}
.fecho li{display:flex;flex-direction:column}
.fecho small{font-size:.8125rem;color:var(--dim)}
.pe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding-block:18px 34px;border-top:1px solid var(--fio)}
.pe div{display:flex;flex-wrap:wrap;gap:14px 28px}
.pe a{border-bottom:1px solid var(--fio);padding-bottom:5px}
.pe a:hover{border-bottom-color:currentColor}
.pe .legal a{border:0;padding:0;text-decoration:underline;text-underline-offset:3px}

/* botão flutuante */
.flutua{position:fixed;right:22px;bottom:22px;z-index:280;display:flex;align-items:center;gap:10px;background:var(--claro);color:var(--tinta);padding:13px 20px;box-shadow:0 6px 26px rgba(0,0,0,.45);transition:transform .25s ease}
.flutua:hover{transform:translateY(-3px)}
.flutua svg{width:17px;height:17px;flex:none}

@media (max-width:900px){
  .menu-btn{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:rgba(9,9,9,.96);padding:6px var(--gut) 18px;z-index:50}
  .menu.aberto{display:flex}
  .menu li{width:100%;border-top:1px solid var(--fio-noite)}
  .menu a{display:block;padding:15px 0}
  .lingua a{display:inline-block}
  .topo{position:relative}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .abre{height:clamp(440px,112vw,620px)}
  .intro,.par,.artista,.fecho{grid-template-columns:1fr}
  .serie,.serie.inv{display:block;min-height:0;padding-bottom:52px}
  .foto,.serie.inv .foto{position:relative;width:100%;height:66vw;margin-bottom:28px}
  .foto::after,.serie.inv .foto::after{background:linear-gradient(to top,var(--bg) 0%,var(--bg0) 38%)}
  .serie.inv .txt{margin-left:0}
  .trio{grid-template-columns:1fr}
  .fecho>div{padding-inline:0;border-left:0;padding-block:24px;border-top:1px solid var(--fio)}
  .fecho>div:first-child{border-top:0;padding-top:0}
  .sob{flex-direction:column;align-items:flex-start}
  .artista img{max-width:300px}
  .flutua{padding:14px;border-radius:50%}
  .flutua span{display:none}
}
@media (max-width:480px){
  .passos{grid-template-columns:1fr}
  .assin{font-size:.9375rem;letter-spacing:.24em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .palco img,.ir svg,.trio img,.flutua,.botao{transition:none}
}