@font-face{
  font-family:"Serif";
  src:url("/f.woff2") format("woff2-variations");
  font-weight:200 900;
  font-display:block;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#000;
  color:#fff;
  font-family:"Serif",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  padding:clamp(1.5rem,4vh,3rem) clamp(1.25rem,5vw,4rem);
}

/* ---------- topo: marca a esquerda, navegacao a direita ---------- */
header{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.9rem clamp(1rem,3vw,2.5rem);
}
.house{
  font-size:clamp(.62rem,.85vw,.74rem);
  font-weight:400;
  font-variation-settings:"opsz" 10;
  letter-spacing:.42em;
  color:#8f8f8f;
  text-indent:.42em;
  text-decoration:none;
  transition:color .25s ease;
}
a.house:hover,a.house:focus-visible{color:#d2d2d2}
nav{display:flex;gap:clamp(.9rem,2.2vw,1.9rem);flex-wrap:wrap}
nav a{
  font-size:clamp(.66rem,.86vw,.76rem);
  font-weight:400;
  font-variation-settings:"opsz" 10;
  letter-spacing:.14em;
  color:#7d7d7d;
  text-decoration:none;
  transition:color .25s ease;
}
nav a:hover,nav a:focus-visible{color:#d2d2d2}
nav a[aria-current="page"]{color:#d2d2d2}

/* ---------- home: a dobra que ja estava no ar ---------- */
main{flex:1 1 auto;width:100%;min-width:0}
.fold{
  min-height:calc(100svh - 20rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:clamp(1.75rem,5vh,3.5rem);
}
.word{
  font-size:clamp(3.4rem,17vw,10.5rem);
  width:100%;
  max-width:100%;
  font-weight:300;
  font-variation-settings:"opsz" 60;
  line-height:.92;
  letter-spacing:-.022em;
  color:#fff;
}
.line{
  font-size:clamp(1.02rem,2.15vw,1.55rem);
  font-weight:400;
  font-variation-settings:"opsz" 20;
  line-height:1.5;
  color:#d2d2d2;
  max-width:min(52ch,100%);
  text-wrap:balance;
}
.strands{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,4.5rem);
  max-width:min(46rem,100%);
  width:100%;
  min-width:0;
}
.strands p{
  font-size:clamp(.86rem,1.12vw,1rem);
  font-weight:400;
  font-variation-settings:"opsz" 12;
  line-height:1.55;
  color:#9c9c9c;
}

/* ---------- bloco abaixo da dobra, na home ---------- */
.below{
  max-width:min(46rem,100%);
  margin:clamp(2rem,4vh,3rem) 0 clamp(2rem,6vh,4rem);
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.below p{
  font-size:clamp(.95rem,1.28vw,1.1rem);
  font-weight:400;
  font-variation-settings:"opsz" 14;
  line-height:1.7;
  color:#9c9c9c;
  max-width:46ch;
}
.onward{align-self:flex-start}
.onward a{
  font-size:clamp(.8rem,1vw,.9rem);
  letter-spacing:.06em;
  color:#7d7d7d;
  text-decoration:none;
  border-bottom:1px solid #2b2b2b;
  padding-bottom:.2em;
  transition:color .25s ease,border-color .25s ease;
}
.onward a:hover,.onward a:focus-visible{color:#d2d2d2;border-color:#6d6d6d}

/* ---------- paginas de texto ---------- */
.prose{
  max-width:min(38rem,100%);
  margin:clamp(3.5rem,11vh,7rem) 0 clamp(3rem,8vh,5rem);
}
.prose h1{
  font-size:clamp(2rem,5.2vw,3.1rem);
  font-weight:300;
  font-variation-settings:"opsz" 40;
  line-height:1.05;
  letter-spacing:-.018em;
  color:#fff;
  margin-bottom:clamp(2rem,5vh,3.2rem);
}
.prose h2{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  font-weight:400;
  font-variation-settings:"opsz" 18;
  line-height:1.35;
  color:#d2d2d2;
  margin:clamp(2.4rem,6vh,3.6rem) 0 1rem;
}
.prose p{
  font-size:clamp(.95rem,1.28vw,1.1rem);
  font-weight:400;
  font-variation-settings:"opsz" 14;
  line-height:1.72;
  color:#9c9c9c;
  margin-bottom:1.15rem;
}
.prose p.lead{color:#d2d2d2}
.prose a{color:#d2d2d2;text-decoration:none;border-bottom:1px solid #2b2b2b;padding-bottom:.12em;transition:color .25s ease,border-color .25s ease}
.prose a:hover,.prose a:focus-visible{color:#fff;border-color:#6d6d6d}
.prose .who{color:#d2d2d2;margin-bottom:.15rem}

footer{flex:0 0 auto;padding-top:clamp(2rem,6vh,3.5rem)}
footer a{
  font-size:clamp(.7rem,.92vw,.8rem);
  font-weight:400;
  font-variation-settings:"opsz" 10;
  letter-spacing:.08em;
  line-height:1;
  color:#7d7d7d;
  text-decoration:none;
  border-bottom:1px solid #2b2b2b;
  padding-bottom:.2em;
  transition:color .25s ease,border-color .25s ease;
}
footer a:hover,footer a:focus-visible{color:#d2d2d2;border-color:#6d6d6d}

@media (max-width:640px){
  .strands{grid-template-columns:1fr;gap:1.1rem;max-width:min(22rem,100%);margin:0 auto}
  .line{max-width:30ch}
  header{gap:.7rem}
  nav{gap:.85rem}
}

/* ==========================================================================
   COMPOSICAO DA HOME · bloco isolado, apenso. Nada acima foi reescrito.
   Um unico elemento estrutural: regua de 1px na cor do texto do corpo a 12%.
   Um elemento repetido cria ritmo; dois tipos criam ruido.
   ========================================================================== */
:root{ --regua:rgba(156,156,156,.12); }

/* A transicao entre a dobra e o corpo. A regua precisa ir de margem a margem,
   entao .below deixa de ser coluna estreita e passa a ocupar a largura util. */
.below{
  max-width:none;
  border-top:1px solid var(--regua);
  padding-top:clamp(2.5rem,6vh,4rem);
}
/* Rodape so da home: o elemento e compartilhado pelas cinco paginas e as
   outras quatro precisam ficar com delta zero. */
footer.home{
  border-top:1px solid var(--regua);
  margin-top:clamp(2.5rem,6vh,4rem);
}

@media (min-width:641px){
  /* As duas vertentes viram par explicito: regua vertical entre elas, 3rem de
     respiro de cada lado (3rem de gap + 3rem de padding), e altura do texto
     mais alto porque o grid estica as duas celulas ate a altura da linha. */
  .strands{ gap:3rem; align-items:stretch; }
  .strands p + p{ border-left:1px solid var(--regua); padding-left:3rem; }

  /* O corpo em duas colunas. Nao inventa conteudo: poe o que ja existe para
     ocupar a largura de que a pagina ja dispunha e nao usava. */
  .below{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,5rem);
    row-gap:1.6rem;
    align-items:start;
  }
  .below > p{ grid-column:1; }
  .below .onward{ grid-column:2; grid-row:1; align-self:start; }
}

@media (max-width:640px){
  /* Em coluna unica a regua vertical nao significa nada: vira um traco curto
     entre as duas vertentes, centralizado. */
  .strands p + p{ border-left:0; padding-left:0; }
  .strands p + p::before{
    content:"";
    display:block;
    width:4rem;
    height:1px;
    background:var(--regua);
    margin:0 auto 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   AJUSTE FINO · aprovado em 21/08. Dois espacos, nada mais.
   -------------------------------------------------------------------------- */

/* 1 · O vao entre as vertentes e a primeira regua era 173px, e 137 deles vinham
   da folga da dobra: ela centraliza um conteudo curto dentro de
   min-height, e sobra a mesma folga em cima e embaixo. Cortar a min-height
   encolheria as duas e subiria "Narrative". Entao a folga de cima vira padding
   explicito — 15vh reproduz os 137px do desktop e os 125px do mobile — e a de
   baixo deixa de existir. "Narrative" nao se move; o vao passa a ser so a
   margem do corpo, que fica controlavel. */
.fold{
  justify-content:flex-start;
  padding-top:clamp(6rem,15vh,9rem);
  min-height:0;
}
.below{ margin-top:clamp(3.5rem,9vh,5.5rem); }

/* 2 · A regua do rodape tinha 108px acima e 59 abaixo, porque acima somavam a
   margem inferior do corpo e a superior do rodape. Zerando a do corpo, sobra so
   a do rodape, que ja e igual ao padding de baixo. */
.below{ margin-bottom:0; }