/* Koe · site · direção C (grão-janela sobre papel). Desktop = C, celular = C3. */
:root{
  --papel:#eae5da; --tinta:#1c1a17; --suave:#6b6353; --latao:#b8873f;
  color-scheme:light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--papel); color:var(--tinta); font-family:"Work Sans", system-ui, sans-serif; }

.pagina{ position:relative; min-height:100svh; overflow:hidden; }

/* grão de filme por cima de tudo */
.filme{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:overlay; opacity:.2; z-index:2; }

/* grão-janela com foto, inclinado 26,57° (desenho no SVG) */
.grao{ position:absolute; z-index:0; display:block; height:auto; }

.conteudo{
  position:relative; z-index:1; min-height:100svh;
  padding:72px; display:flex; flex-direction:column; justify-content:space-between; gap:48px;
}
.topo{ display:flex; justify-content:space-between; align-items:flex-start; }
.nome{ width:150px; height:auto; display:block; color:var(--tinta); }

.texto{ display:flex; flex-direction:column; gap:26px; max-width:min(760px, 52vw); }
.rotulo{
  font-family:"Space Mono", ui-monospace, monospace; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--suave);
}
h1{
  margin:0; font-family:"Fraunces", Georgia, serif; font-optical-sizing:auto;
  font-variation-settings:"opsz" 144, "SOFT" 0; font-weight:560;
  letter-spacing:-.035em; line-height:.9; font-size:clamp(56px, 8.6vw, 132px);
}
h1 em{ font-style:italic; font-weight:400; color:var(--latao); }
.erro h1{ font-size:clamp(46px, 6.8vw, 104px); }
.sub{ margin:0; font-size:20px; line-height:1.55; max-width:460px; }

.link{
  font-family:"Space Mono", ui-monospace, monospace; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta); text-decoration:none;
  border-bottom:1px solid var(--tinta); padding-bottom:3px; align-self:flex-start;
}
.link:hover, .link:focus-visible{ color:var(--latao); border-color:var(--latao); }

.rodape{ display:flex; justify-content:space-between; align-items:flex-end; }
.so-celular{ display:none; }

/* desktop (C): grão à direita, centralizado na altura, cortado pela borda */
.grao{ width:min(640px, 44vw); right:-40px; top:50%; transform:translateY(-50%); }

/* celular (C3): nome e @ no topo, texto logo abaixo, grão gigante sangrando pela base */
@media (max-width:760px){
  .conteudo{
    padding:max(56px, env(safe-area-inset-top)) 32px 32px;
    justify-content:flex-start; gap:64px;
  }
  .nome{ width:112px; }
  .so-celular{ display:inline-block; }
  .rodape{ display:none; }
  .texto{ max-width:none; gap:18px; }
  .rotulo, .link{ font-size:11px; }
  h1{ font-size:58px; }
  .erro h1{ font-size:46px; }
  .sub{ font-size:16px; max-width:290px; }
  /* o grão encolhe em tela baixa e o conteúdo reserva espaço pra parte visível dele,
     então em celular pequeno a página rola em vez de o grão cobrir o texto */
  .pagina{ --g:clamp(360px, 66svh, 560px); }
  .conteudo{ padding-bottom:calc(var(--g) * .62 + 16px); }
  .grao{ width:var(--g); left:18vw; right:auto; top:auto; bottom:calc(var(--g) * -.41); transform:none; }
}