:root{
  --paper:#fbf8f6;
  --ink:#16120f;
  --mute:#8a7f78;
  --line:#e6ddd7;
  --pink:#e6638c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
header{
  padding:34px 44px 0;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.mark{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  color:inherit;
}
.mark b{color:var(--pink);font-weight:600}
.yr{font-size:12px;color:var(--mute);letter-spacing:.12em}

main{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 44px;
  max-width:1080px;
  width:100%;
  margin:0 auto;
}
.lede{font-size:14px;color:var(--mute);margin:0 0 38px;letter-spacing:.02em}

nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
nav li{border-bottom:1px solid var(--line)}
nav a{
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;
  gap:24px;
  padding:26px 4px;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
}
nav a::before{
  content:"";
  position:absolute;
  left:0;bottom:0;height:2px;width:0;
  background:var(--pink);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
nav a:hover::before,nav a:focus-visible::before{width:100%}
.num{font-size:12px;color:var(--mute);letter-spacing:.14em;transition:color .3s}
.label{
  font-size:clamp(30px,5.4vw,54px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),color .3s;
  transform-origin:left center;
}
.sub{
  font-size:13px;color:var(--mute);text-align:right;letter-spacing:.04em;
  opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s;
}
nav a:hover .label,nav a:focus-visible .label{transform:translateX(10px);color:var(--pink)}
nav a:hover .num,nav a:focus-visible .num{color:var(--pink)}
nav a:hover .sub,nav a:focus-visible .sub{opacity:1;transform:translateX(0)}

.topico{padding:20px 4px 0}
.crumb{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  text-decoration:none;display:inline-block;margin-bottom:26px;padding-bottom:3px;
  border-bottom:1px solid var(--line);
}
.crumb:hover{color:var(--pink);border-color:var(--pink)}
h1{
  font-size:clamp(40px,8vw,86px);
  margin:0 0 26px;
  letter-spacing:-.03em;
  font-weight:600;
  line-height:.95;
}
.topico p{max-width:60ch;color:#5e544e;line-height:1.7;font-size:16px;margin:0 0 18px}
.rule{height:1px;background:var(--line);margin:34px 0;max-width:520px}

footer{
  padding:26px 44px 34px;
  font-size:12px;color:var(--mute);letter-spacing:.1em;
  display:flex;justify-content:space-between;
}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--pink)}

@media (max-width:640px){
  header,footer{padding-left:22px;padding-right:22px}
  main{padding-left:22px;padding-right:22px}
  nav a{grid-template-columns:40px 1fr;gap:14px}
  .sub{display:none}
}