:root{
  --yellow:#ffd400;
  --ink:#111;
  --toon:'Luckiest Guy',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;
  background:#ffd400;
  color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow-x:hidden;
  display:flex;flex-direction:column;
}
::selection{background:rgba(0,0,0,.18)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* a arte preenche o ecra todo */
.frame{
  position:fixed;inset:0;z-index:0;
  background:#ffd400 url('/img/hero.png') center center / cover no-repeat;
}

/* topo: logo ao centro */
.topbar{
  position:relative;z-index:3;
  display:flex;justify-content:center;
  padding:clamp(18px,2.8vh,34px) clamp(20px,3.4vw,54px) 0;
}
.brand{text-decoration:none;text-align:center;display:block}
.logo-mark{
  display:block;
  -webkit-user-select:none;user-select:none;
  font-family:var(--toon);
  font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:1px;
  color:#fff;
  transform:skewX(-8deg);
  -webkit-text-stroke:11px var(--ink);paint-order:stroke fill;
  text-shadow:0 6px 0 rgba(0,0,0,.92);
}
/* o ponto e desenhado, senao o contorno preto das letras engole-o e le-se HANDS FUN */
.logo-mark .dot{
  display:inline-block;position:relative;z-index:2;
  width:.19em;height:.19em;margin:0 .05em;
  vertical-align:.03em;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 .05em var(--ink);
  -webkit-text-stroke:0;
}
.logo-sub{
  display:block;margin-top:clamp(8px,1.4vh,14px);
  font-size:clamp(12px,1.3vw,20px);font-weight:900;letter-spacing:.12em;
  color:var(--ink);
}

/* bloco de texto encostado a esquerda, onde a arte esta vazia */
.stage{
  position:relative;z-index:3;flex:1;
  display:flex;align-items:center;
  padding:clamp(8px,1.6vh,20px) clamp(20px,3.4vw,54px) clamp(14px,2vh,28px);
}
.copy{width:min(50%,660px);min-width:280px}

.headline{
  margin:0;
  font-size:clamp(42px,5.9vw,86px);
  font-weight:900;line-height:.95;letter-spacing:-.03em;
  color:var(--ink);
}
.lede{
  margin:clamp(14px,2.2vh,24px) 0 clamp(16px,2.4vh,26px);
  font-size:clamp(13px,1.28vw,19px);font-weight:800;letter-spacing:.07em;line-height:1.6;
  color:var(--ink);
}

/* campo de email */
.notify{
  display:flex;align-items:center;gap:10px;
  width:min(420px,100%);
  padding:5px 5px 5px 16px;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--ink);
}
.notify-icon{display:flex;color:var(--ink)}
.notify input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;padding:11px 4px;
}
.notify input::placeholder{color:rgba(0,0,0,.42);font-weight:600}
.notify button{
  flex:0 0 auto;border:0;cursor:pointer;
  padding:12px clamp(16px,1.9vw,26px);
  border-radius:999px;
  background:var(--ink);
  color:var(--yellow);font-family:inherit;font-weight:900;font-size:12px;letter-spacing:.09em;
  white-space:nowrap;
  transition:transform .15s, background .15s;
}
.notify button:hover{transform:translateY(-2px);background:#2b2b2b}
.notify button:active{transform:none}
.notify button[disabled]{opacity:.6;cursor:default;transform:none}

.notify-msg{
  min-height:16px;margin:12px 0 0;
  font-size:11px;font-weight:900;letter-spacing:.11em;color:var(--ink);
  opacity:0;transition:opacity .3s;
}
.notify-msg.show{opacity:1}
.notify-msg.err{color:#a81200}

/* redes */
.socials{display:flex;gap:clamp(14px,1.6vw,24px);margin-top:clamp(16px,2.4vh,26px)}
.socials a{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:var(--ink);
  transition:transform .2s,opacity .2s;
}
.socials a svg{width:100%;height:100%}
.socials a:hover{transform:translateY(-3px)}
.socials a.soon{opacity:.3;cursor:default}
.socials a.soon:hover{transform:none}

/* rabisco a fechar */
.scribble{
  margin:clamp(18px,2.8vh,32px) 0 0;
  font-family:'Permanent Marker',cursive;
  font-size:clamp(28px,3vw,46px);line-height:1.12;
  color:var(--ink);transform:rotate(-7deg);transform-origin:left center;
  width:max-content;
  -webkit-user-select:none;user-select:none;
}
.scribble::selection,.scribble *::selection{background:transparent}
.scribble::after{
  content:'';display:block;width:84%;height:7px;margin-top:8px;
  border-radius:3px;background:var(--ink);transform:rotate(4deg);
}

/* ecras estreitos: a arte encosta a direita e o texto fica centrado por cima de um veu claro */
@media (max-width:900px), (orientation:portrait){
  .frame{background-position:72% center}
  .frame::after{content:'';position:absolute;inset:0;background:rgba(255,246,214,.82)}
  .topbar{text-align:center}
      .stage{padding:clamp(18px,3vh,30px) 22px 40px}
  .copy{width:100%;min-width:0;text-align:center}
  .notify{margin:0 auto}
  .socials{justify-content:center}
  .scribble{margin-left:auto;margin-right:auto;transform:rotate(-4deg);transform-origin:center}
  .scribble::after{margin:5px auto 0}
}