/* Página de espera do uiler.com — réplica da "Home - manutenção" do Squarespace.
   Medidas tiradas da própria página: coluna única à esquerda a 60/1440 da largura,
   assinatura 22px/500 com entreletra .14em, "Coming soon." 52px/500 com entrelinha 1,
   contatos 14px/400 com entreletra .04em e entrelinha 1.4, tudo em branco sobre a foto.
   A original usa Futura PT (Adobe, paga); aqui entra a Jost, que é a substituta livre.
   Acrescentei só um véu escuro suave atrás da coluna: a original deixa o texto branco
   sobre fotos claras, onde ele some. */
:root{
  --f:"Jost","Futura PT",Futura,"Century Gothic","Helvetica Neue",Arial,sans-serif;
  --x:clamp(24px,4.17vw,60px);   /* margem esquerda da coluna */
  --y:clamp(28px,2.8vw,40px);    /* margem de topo */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f);color:#fff;background:#1a1a1a;
  font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

/* fundo: as mesmas fotos da página original, em sucessão */
.fundo{position:fixed;inset:0;z-index:0;background:#1a1a1a}
.fundo .s{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.fundo .s.on{opacity:1}
.fundo .s img{width:100%;height:100%;object-fit:cover}
/* véu só à esquerda, onde fica o texto */
.fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.34) 26%,rgba(0,0,0,.06) 48%,rgba(0,0,0,0) 66%)}

/* coluna de texto */
.col{position:relative;z-index:1;min-height:100%;padding:var(--y) var(--x) 48px;
  max-width:560px;text-shadow:0 0 18px rgba(0,0,0,.4)}
.marca{display:block;font-size:22px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.aviso{margin:40px 0 0;font-size:52px;font-weight:500;line-height:1;letter-spacing:-.01em}
.contatos{margin:58px 0 0;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.04em}
.contatos p{margin:0 0 19.6px}
.contatos .rot{text-transform:uppercase}

@media(max-width:640px){
  .marca{font-size:17px;letter-spacing:.12em}
  .aviso{font-size:36px;margin-top:30px}
  .contatos{margin-top:42px;font-size:13px}
  .fundo::after{background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.3) 45%,rgba(0,0,0,.55))}
}
@media(prefers-reduced-motion:reduce){.fundo .s{transition:none}}